/* public/css/tokens.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Phoenix v2 — canonical design tokens
 *
 * This file is the single source of truth for all design decisions.
 * Load it FIRST in index.html, before styles.css or any component CSS.
 *
 * Naming convention
 * ─────────────────
 * Canonical names use the literary-palette shorthand (--ink, --paper, etc).
 * Legacy aliases at the bottom map old variable names to the canonical ones
 * so every existing view continues to work without edits.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bentham&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Afacad+Flux:wght@300;400;500;600;700&display=swap');

:root {

    /* ── Colour palette ──────────────────────────────────────────────────── */

    /* Core */
    --ink:    #060558;   /* deep navy — primary text, headings, borders */
    --paper:  #F5F5F7;   /* warm off-white — page background */
    --white:  #FFFFFF;

    /* Brand */
    --gold:   #FFC676;   /* amber — primary buttons, highlights, active states */
    --teal:   #66CCCC;   /* soft teal — secondary UI, hints, info badges */
    --coral:  #FF6666;   /* warm coral — errors, destructive actions, hover */
    --moss:   #5AB987;   /* sage green — success states, confirmations */
    --plum:   #7B5EA7;   /* plum — tertiary accent (e.g. creator/author badges) */

    /* Deep variants — hover states, small solid accents (underlines, dots) */
    --gold-deep:  #E8A84A;
    --moss-deep:  #3D8C61;
    --coral-deep: #D94545;
    --teal-deep:  #3D9999;
    --plum-deep:  #5A3D85;

    /* Ink scale — for muted text, disabled states, rules */
    --ink-dim:   #807EA1;   /* muted purple-grey — subtitles, captions */
    --ink-faint: rgba(6, 5, 88, 0.06);   /* near-invisible tint — zebra rows, wells */
    --ink-rule:  rgba(6, 5, 88, 0.10);   /* separator lines */

    /* Tint surfaces — 8% opacity versions for badge/well backgrounds */
    --gold-tint:  rgba(255, 198, 118, 0.10);
    --teal-tint:  rgba(102, 204, 204, 0.10);
    --coral-tint: rgba(255, 102, 102,  0.10);
    --moss-tint:  rgba(90,  185, 135,  0.10);

    /* Amber — warning states, unearned advances, caution indicators */
    --amber:      #D4A574;
    --amber-tint: rgba(212, 165, 116, 0.10);

    /* Rule (border) — semantic alias */
    --rule:   rgba(6, 5, 88, 0.10);   /* hairline — row/section dividers */
    --rule-2: rgba(6, 5, 88, 0.18);   /* stronger — card/panel/input borders */


    /* ── Typography ──────────────────────────────────────────────────────── */

    --font-title:  'Bentham',    serif;       /* headings, display text */
    --font-body:   'EB Garamond', serif;      /* body prose, table cells */
    --font-ui:     'Afacad Flux', sans-serif; /* buttons, labels, nav, badges */

    /* Scale (major third — 1.250) */
    --text-xs:   0.64rem;    /*  ~10px */
    --text-sm:   0.80rem;    /*  ~13px */
    --text-base: 1.00rem;    /*  ~16px */
    --text-md:   1.25rem;    /*  ~20px */
    --text-lg:   1.563rem;   /*  ~25px */
    --text-xl:   1.953rem;   /*  ~31px */
    --text-2xl:  2.441rem;   /*  ~39px */
    --text-3xl:  3.052rem;   /*  ~49px */

    /* Line heights */
    --leading-tight:  1.25;
    --leading-snug:   1.4;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* Letter spacing */
    --tracking-tight:  -0.01em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-wider:   0.08em;
    --tracking-widest:  0.16em;


    /* ── Spacing ─────────────────────────────────────────────────────────── */

    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */


    /* ── Layout ──────────────────────────────────────────────────────────── */

    --max-width:        1400px;
    --nav-height:       56px;   /* height of a single nav-link row */
    --masthead-height:  84px;   /* authenticated desktop nav's row-1 masthead band */
    --border-radius:    12px;
    --border-radius-sm:  6px;
    --border-radius-lg: 20px;


    /* ── Elevation / shadows ─────────────────────────────────────────────── */

    --shadow-xs: 0 1px 3px  rgba(6, 5, 88, 0.06);
    --shadow-sm: 0 2px 6px  rgba(6, 5, 88, 0.08);
    --shadow:    0 4px 16px rgba(6, 5, 88, 0.10);
    --shadow-md: 0 8px 28px rgba(6, 5, 88, 0.12);
    --shadow-lg: 0 16px 48px rgba(6, 5, 88, 0.14);


    /* ── Motion ──────────────────────────────────────────────────────────── */

    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   400ms;

    --transition:      all var(--duration-base) var(--ease);
    --transition-fast: all var(--duration-fast) var(--ease-out);


    /* ── Z-index ladder ──────────────────────────────────────────────────── */

    --z-base:    1;
    --z-raised:  10;
    --z-nav:     100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;


    /* ── Legacy aliases (backwards compatibility) ────────────────────────── */
    /*
     * Every existing view uses at least one of these names.
     * Pointing them at canonical tokens means those views still render
     * correctly without any edits — and new views written from Phase 2
     * onwards use the canonical names directly.
     */

    --background:     var(--paper);
    --text-colour:    var(--ink);
    --text-dark:      var(--ink);
    --primary:        var(--gold);
    --secondary:      var(--teal);
    --button-hover:   var(--coral);
    --error:          var(--coral);
    --success:        var(--moss);
    --border-colour:  var(--rule);
    --note-colour:    var(--ink-dim);
    --shadow-hover:   var(--shadow-md);

    /* Legacy radius names */
    --border-radius-small: var(--border-radius-sm);

    /* Legacy font alias */
    --font-button: var(--font-ui);
}


/* ── Paper texture ──────────────────────────────────────────────────────────
 * A barely-there grain and two soft gradient blooms anchored to the
 * corners of the viewport. The texture sits above the background colour
 * but below all content via pointer-events: none.
 *
 * If this ever causes a paint performance issue on lower-end devices,
 * remove the ::before rule — the gradient blooms on body are sufficient.
 * ─────────────────────────────────────────────────────────────────────────── */

body {
    background-color: var(--paper);
    background-image:
        radial-gradient(ellipse 60% 50% at 10% 0%,   rgba(255, 198, 118, 0.07) 0%, transparent 100%),
        radial-gradient(ellipse 50% 40% at 90% 100%,  rgba(102, 204, 204, 0.06) 0%, transparent 100%);
    background-attachment: fixed;
}

/* Grain overlay — feTurbulence at 2.5% opacity */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: var(--z-toast);
    mix-blend-mode: multiply;
}