/* ============================================================================
   alpha.cruises — Codex Lumen design tokens
   A luminous editorial archive: ivory & ink, cobalt for interaction,
   vermilion for editorial markers. Light primary + a "night reading" dark mode.
   ========================================================================== */

:root {
    /* ── Surfaces (light, primary) ── */
    --paper:        #F7F4EC;   /* page background — ivory */
    --surface:      #FCFAF4;   /* cards, panels */
    --surface-2:    #FFFFFF;   /* raised / inset */
    --surface-sunk: #EFEADD;   /* wells, code, thumbnails */

    /* ── Ink (text) ── */
    --ink:        #15130F;
    --ink-soft:   #3D372E;
    --ink-mute:   #6B6256;
    --ink-faint:  #9A9080;

    /* ── Lines / hairlines ── */
    --line:        rgba(21, 19, 15, 0.12);
    --line-strong: rgba(21, 19, 15, 0.26);
    --line-faint:  rgba(21, 19, 15, 0.06);

    /* ── Accents ── */
    --cobalt:        #1A3CE0;   /* primary: links, actions, interactive */
    --cobalt-ink:    #1430BE;
    --cobalt-soft:   rgba(26, 60, 224, 0.10);
    --cobalt-line:   rgba(26, 60, 224, 0.28);
    --vermilion:     #E03B2F;   /* secondary: seals, markers, figure labels */
    --vermilion-soft:rgba(224, 59, 47, 0.10);
    --gold:          #B07A1E;   /* "verified" patina */
    --green:         #2E6B4F;
    --green-soft:    rgba(46, 107, 79, 0.12);

    /* ── Semantic ── */
    --ok:      #2E6B4F;
    --warn:    #B07A1E;
    --danger:  #C32D22;
    --ok-soft:     rgba(46, 107, 79, 0.12);
    --warn-soft:   rgba(176, 122, 30, 0.14);
    --danger-soft: rgba(195, 45, 34, 0.10);

    /* ── Typography ── */
    --font-display: 'Fraunces', 'Hoefler Text', Georgia, serif;
    --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
    --font-ui:      'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.85rem;
    --fs-base: 1.0rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   1.875rem;
    --fs-2xl:  2.6rem;
    --fs-3xl:  3.6rem;
    --fs-4xl:  clamp(2.8rem, 6vw, 5.2rem);

    /* ── Spacing ── */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* ── Radius (editorial = nearly square) ── */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 7px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* ── Shadows (soft, paper-like) ── */
    --shadow-sm: 0 1px 2px rgba(21, 19, 15, 0.05), 0 2px 8px rgba(21, 19, 15, 0.04);
    --shadow-md: 0 4px 14px rgba(21, 19, 15, 0.08), 0 1px 3px rgba(21, 19, 15, 0.06);
    --shadow-lg: 0 18px 50px rgba(21, 19, 15, 0.14), 0 4px 12px rgba(21, 19, 15, 0.06);
    --shadow-ring: 0 0 0 3px var(--cobalt-soft);

    /* ── Motion ── */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 130ms var(--ease);
    --t-med:  240ms var(--ease);
    --t-slow: 480ms var(--ease-out);

    /* ── Layout ── */
    --maxw: 1200px;
    --maxw-prose: 720px;
    --header-h: 68px;

    color-scheme: light;
}

[data-theme="dark"] {
    --paper:        #15130F;
    --surface:      #1C1915;
    --surface-2:    #221E18;
    --surface-sunk: #100E0B;

    --ink:        #EFE8D8;
    --ink-soft:   #CDC4B3;
    --ink-mute:   #9C9384;
    --ink-faint:  #6E665A;

    --line:        rgba(239, 232, 216, 0.14);
    --line-strong: rgba(239, 232, 216, 0.30);
    --line-faint:  rgba(239, 232, 216, 0.07);

    --cobalt:        #7C92FF;
    --cobalt-ink:    #93A5FF;
    --cobalt-soft:   rgba(124, 146, 255, 0.14);
    --cobalt-line:   rgba(124, 146, 255, 0.34);
    --vermilion:     #F2604F;
    --vermilion-soft:rgba(242, 96, 79, 0.14);
    --gold:          #D9A84A;
    --green:         #5BAE83;
    --green-soft:    rgba(91, 174, 131, 0.16);

    --ok: #5BAE83; --warn: #D9A84A; --danger: #F2604F;
    --ok-soft: rgba(91,174,131,0.16); --warn-soft: rgba(217,168,74,0.16); --danger-soft: rgba(242,96,79,0.14);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 10px rgba(0,0,0,0.25);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.4);
    --shadow-lg: 0 22px 60px rgba(0,0,0,0.55);

    color-scheme: dark;
}