/* ============================================================
   ryfa design tokens — the source of truth for the design system.
   Change tokens here, not in components.
   ============================================================ */

:root {
    /* ---- Color: light mode ---- */
    --ink:              #0A0A0B;     /* primary text — near-black */
    --ink-2:            #33322F;     /* secondary text */
    --ink-3:            #6E6C67;     /* tertiary / meta */
    --ink-4:            #A8A6A0;     /* placeholders / disabled */

    --paper:            #FAFAF7;     /* app background — warm off-white */
    --surface:          #FFFFFF;     /* cards, sheets, modals */
    --surface-2:        #F3F2ED;     /* subtle raised surface */
    --line:             #E7E5DF;     /* borders / dividers */

    --accent:           #FF5A3C;     /* ryfa coral — CTAs, focus */
    --accent-hover:     #E64A2E;     /* darker coral for hover */
    --accent-soft:      #FFEDE8;     /* very soft coral background */
    --accent-ink:       #FFFFFF;     /* text on accent surfaces */

    --success:          #16A34A;
    --danger:           #DC2626;
    --warning:          #F59E0B;

    /* ---- Typography ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: var(--font-sans); /* logo mark uses SVG/PNG, not font */

    --fs-xs:    0.75rem;    /* 12px — meta labels */
    --fs-sm:    0.875rem;   /* 14px — small body */
    --fs-base:  1rem;       /* 16px — body */
    --fs-lg:    1.125rem;   /* 18px — emphasized body */
    --fs-xl:    1.375rem;   /* 22px — small headings */
    --fs-2xl:   1.75rem;    /* 28px — page titles */
    --fs-3xl:   2.25rem;    /* 36px — hero titles */
    --fs-4xl:   3rem;       /* 48px — display */

    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-body:  1.55;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:    0.04em;
    --tracking-widest:  0.12em;

    /* ---- Spacing scale (4px base) ---- */
    --sp-1:   0.25rem;
    --sp-2:   0.5rem;
    --sp-3:   0.75rem;
    --sp-4:   1rem;
    --sp-5:   1.25rem;
    --sp-6:   1.5rem;
    --sp-8:   2rem;
    --sp-10:  2.5rem;
    --sp-12:  3rem;
    --sp-16:  4rem;
    --sp-20:  5rem;
    --sp-24:  6rem;

    /* ---- Radii ---- */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 999px;

    /* ---- Shadows (warm, subtle) ---- */
    --shadow-1: 0 1px 2px rgba(20, 14, 8, 0.04),
                0 1px 3px rgba(20, 14, 8, 0.06);
    --shadow-2: 0 2px 4px rgba(20, 14, 8, 0.05),
                0 4px 12px rgba(20, 14, 8, 0.08);
    --shadow-3: 0 4px 8px rgba(20, 14, 8, 0.06),
                0 12px 32px rgba(20, 14, 8, 0.12);

    /* ---- Motion ---- */
    --ease-out:  cubic-bezier(0.2, 0.7, 0.3, 1);
    --ease-in:   cubic-bezier(0.5, 0, 0.75, 0);
    --dur-fast:  120ms;
    --dur:       200ms;
    --dur-slow:  320ms;

    /* ---- Layout ---- */
    --max-w-content: 640px;
    --max-w-app:     420px;   /* the app runs at phone width */
    --nav-h:         64px;
    --header-h:      56px;
}

/* ============================================================
   Dark mode — inverts the ink/paper scale; accent stays warm.

   Pages opt in one of two ways:
     - System-driven:  <html> has NO data-theme attribute → follows OS
     - Explicit dark:  <html data-theme="dark">           → always dark

   Pages opt OUT by setting <html data-theme="light">.
   Most of the app forces light mode via app-shell.php / auth pages,
   so this dark palette will kick in only on pages that intentionally
   allow it (e.g. legal/privacy/technical pages later on).
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink:              #F5F4F1;
        --ink-2:            #C7C4BD;
        --ink-3:            #8F8C86;
        --ink-4:            #5C5A55;

        --paper:            #0F0E0C;
        --surface:          #1A1917;
        --surface-2:        #24221F;
        --line:             #2E2C28;

        --accent:           #FF6B4F;
        --accent-hover:     #FF8168;
        --accent-soft:      #3A1C15;
        --accent-ink:       #FFFFFF;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4),
                    0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.5),
                    0 12px 48px rgba(0, 0, 0, 0.6);
    }
}

/* Explicit dark opt-in for pages that want it regardless of system pref. */
:root[data-theme="dark"] {
    --ink:              #F5F4F1;
    --ink-2:            #C7C4BD;
    --ink-3:            #8F8C86;
    --ink-4:            #5C5A55;

    --paper:            #0F0E0C;
    --surface:          #1A1917;
    --surface-2:        #24221F;
    --line:             #2E2C28;

    --accent:           #FF6B4F;
    --accent-hover:     #FF8168;
    --accent-soft:      #3A1C15;
    --accent-ink:       #FFFFFF;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4),
                0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.5),
                0 12px 48px rgba(0, 0, 0, 0.6);
}