@import './tokens.css';
@import './reader.css';
@import './components.css';

/* ==========================================================================
   Self-hosted Tamil faces (§18, §33)
   Bundled rather than fetched from a CDN so the reader app keeps its
   typography offline, which is the whole point of the download feature.
   Both families are SIL Open Font Licence.
   ========================================================================== */

@font-face {
    font-family: 'Noto Sans Tamil';
    src: url('../fonts/noto-sans-tamil-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
    font-family: 'Noto Sans Tamil';
    src: url('../fonts/noto-sans-tamil-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
    font-family: 'Noto Sans Tamil';
    src: url('../fonts/noto-sans-tamil-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
    font-family: 'Noto Sans Tamil';
    src: url('../fonts/noto-sans-tamil-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
    font-family: 'Anek Tamil';
    src: url('../fonts/anek-tamil-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
    font-family: 'Anek Tamil';
    src: url('../fonts/anek-tamil-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sticky headers must not cover the target of an in-page jump. */
    scroll-padding-top: calc(var(--nav-h) + var(--s-5));
}

body {
    min-height: 100dvh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* The cosmos: two very soft radial fields. Fixed and non-interactive so
   scrolling stays cheap on a phone. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 70% 50% at 12% -8%, rgba(192, 138, 78, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 45% at 92% 4%, rgba(82, 199, 212, 0.055), transparent 62%),
        radial-gradient(ellipse 80% 60% at 50% 108%, rgba(158, 138, 214, 0.05), transparent 65%);
}

:root[data-theme='dawn'] body::before,
:root[data-theme='sepia'] body::before { opacity: 0.55; }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

/* §36 — a visible, consistent focus ring everywhere. */
:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--copper-edge); color: var(--ink); }

* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--hairline-strong);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}

/* ==========================================================================
   Typography primitives
   ========================================================================== */

.ta {
    font-family: var(--font-tamil);
    /* Tamil combining vowel signs need more room than Latin defaults give. */
    line-height: var(--reader-line-height);
    word-break: normal;
    overflow-wrap: break-word;
}

.verse {
    font-family: var(--font-verse);
    font-size: calc(var(--text-xl) * var(--reader-font-scale));
    line-height: calc(var(--reader-line-height) + 0.15);
    letter-spacing: 0.004em;
    white-space: pre-wrap;
}

.prose {
    font-family: var(--font-tamil);
    font-size: calc(var(--text-md) * var(--reader-font-scale));
    line-height: var(--reader-line-height);
    color: var(--ink-soft);
}

.prose p + p { margin-top: 0.9em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; color: var(--ink); }
.prose mark { background: var(--saffron-wash); color: var(--ink); padding: 0 2px; border-radius: 3px; }

.eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.title-1 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.title-2 { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; }
.title-3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.35; }

.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.shell {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--s-4);
}

@media (min-width: 900px) {
    .container { padding-inline: var(--s-6); }
}

.reading-column {
    width: 100%;
    max-width: var(--reading-width);
    margin-inline: auto;
}

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--s-2); }
.stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); }
.stack-5 { gap: var(--s-5); }
.stack-6 { gap: var(--s-6); }

.row { display: flex; align-items: center; gap: var(--s-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ==========================================================================
   Surfaces
   ========================================================================== */

.glass {
    background: linear-gradient(160deg, var(--glass), transparent 70%), var(--bg-card);
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-lg);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
}

.panel {
    background: var(--bg-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
}

/* ==========================================================================
   Buttons and controls
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    /* §36 — 44px minimum touch target. */
    min-height: 44px;
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline-strong);
    background: var(--bg-raised);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
    white-space: nowrap;
}

.btn:hover { background: var(--bg-card); border-color: var(--copper-edge); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--copper), var(--copper-deep));
    border-color: transparent;
    color: #12100C;
    font-weight: 600;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--copper-bright), var(--copper)); border-color: transparent; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--glass); color: var(--ink); }

.btn-danger { border-color: rgba(224, 114, 95, 0.4); color: var(--danger); }
.btn-danger:hover { background: var(--danger-wash); border-color: var(--danger); }

.btn-sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--text-xs); }
.btn-icon { min-width: 44px; padding: 0; }

.field {
    width: 100%;
    min-height: 44px;
    padding: var(--s-2) var(--s-3);
    background: var(--bg-inset);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    color: var(--ink);
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.field:focus { border-color: var(--cyan-edge); background: var(--bg-raised); outline: none; }
.field::placeholder { color: var(--ink-faint); }

textarea.field { min-height: 120px; resize: vertical; line-height: 1.6; }

.label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--s-2);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 34px;
    padding: 0 var(--s-3);
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    background: var(--glass);
    color: var(--ink-soft);
    font-size: var(--text-xs);
    font-weight: 500;
    transition: all var(--fast) var(--ease);
}

.chip:hover { border-color: var(--copper-edge); color: var(--ink); }
.chip[aria-pressed='true'],
.chip.is-active {
    background: var(--copper-wash);
    border-color: var(--copper-edge);
    color: var(--copper-bright);
}

/* ==========================================================================
   §12 — evidence badges
   The tone classes are the visual grammar readers learn: cool = empirical,
   warm = traditional, and the softer the fill the weaker the claim.
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 3px var(--s-3);
    border-radius: var(--r-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid;
}

.badge-science-strong { color: var(--cyan-bright); border-color: var(--cyan); background: var(--cyan-wash); }
.badge-science { color: var(--cyan); border-color: var(--cyan-edge); background: var(--cyan-wash); }
.badge-science-soft { color: var(--cyan); border-color: var(--cyan-edge); background: transparent; }
.badge-mind { color: var(--violet-bright); border-color: var(--violet-edge); background: var(--violet-wash); }
.badge-copper { color: var(--copper-bright); border-color: var(--copper-edge); background: var(--copper-wash); }
.badge-saffron { color: var(--saffron-bright); border-color: rgba(232, 154, 76, 0.34); background: var(--saffron-wash); }
.badge-neutral { color: var(--ink-muted); border-color: var(--hairline-strong); background: transparent; }

/* The §12 auto-disclaimer. Deliberately plain: it is a caveat, not a feature. */
.disclaimer {
    display: flex;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-left: 2px solid var(--cyan-edge);
    background: var(--cyan-wash);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-family: var(--font-tamil);
    font-size: calc(var(--text-sm) * var(--reader-font-scale));
    line-height: 1.7;
    color: var(--ink-soft);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.divider { height: 1px; background: var(--hairline); border: 0; }

.skeleton {
    background: linear-gradient(90deg, var(--bg-raised) 25%, var(--bg-card) 50%, var(--bg-raised) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--r-md);
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.fade-in { animation: fadeIn var(--base) var(--ease) both; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.route-enter-active, .route-leave-active { transition: opacity var(--base) var(--ease), transform var(--base) var(--ease); }
.route-enter-from { opacity: 0; transform: translateY(8px); }
.route-leave-to { opacity: 0; }

.scroll-x {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--s-2);
    -webkit-overflow-scrolling: touch;
}

.scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }
.scroll-x::-webkit-scrollbar { height: 6px; }