/* SCALES OF CHANGE — Design Tokens v1.1 · soc.baseiota.org
   Source: SOC_Design_System.md §3. Reference tokens, never raw values.
   Two tiers: primitives (--soc-*) and semantic aliases (--soc-surface-*,
   --soc-text-*, --soc-interactive-*). Components bind to the semantic tier;
   primitives exist so the semantic tier has one place to change. */

@layer soc.tokens, soc.base;

@layer soc.tokens {
  :root {
    color-scheme: light; /* deliberate: no dark mode in v1 — panel art is color-calibrated for light */

    /* ═ Primitives — brand (UI chrome) ═ */
    --soc-violet-900: #2E1A52;
    --soc-violet-700: #4C2A85;
    --soc-violet-500: #6B44AE;
    --soc-violet-100: #EDE6F7;
    --soc-gold-600:   #C9A227;
    --soc-gold-400:   #E0BE55;
    --soc-offwhite:   #FAF7F2;
    --soc-white:      #FFFFFF;
    --soc-charcoal:   #26222B;
    --soc-ink-60:     #5D5764;

    /* ═ Primitives — story (inside panels + chapter chrome ONLY) ═ */
    --soc-rights-amber:  #E8A13D;
    --soc-rights-dawn:   #F6E3C5;
    --soc-justice-blue:  #2C4E8A;
    --soc-justice-deep:  #D9E2F1;
    --soc-action-green:  #3E7C4F;
    --soc-action-leaf:   #DEEDE1;
    --soc-silence-grey:  #8B8B93;
    --soc-threat-red:    #C6432F; /* abuse imagery only — NEVER UI errors */
    --soc-cold-glow:     #7E9CC0; /* cold screen light: prologue windows, harm-adjacent glow.
                                     NOT justice-blue — harm and JUSTICE never share vocabulary */
    --soc-weave-grey:    #A9A5AD; /* silence basket fiber — distinct from silence-grey dots */
    --soc-mutuba-bud:    #6FA34D; /* the final leaf-bud ONLY — used once in the whole book */

    /* ═ Primitives — earth/texture tier (Addendum v2: surfaces + pattern ONLY) ═
       Pattern law: app surfaces, never inside story panels. Texture ≤5% contrast;
       text contrast measured against the texture's darkest point, still ≥4.5:1.
       Assets static, tiling, ≤30KB, dropped first in data-saver. */
    --soc-paper:      #F7F0E3; /* warmed page ground — replaces offwhite as default page bg */
    --soc-lubugo:     #8C4F2B; /* barkcloth terracotta — pattern strokes, bindings, dividers */
    --soc-weave:      #C9A97B; /* dry-fiber neutral — texture midtone, card edges */
    --soc-weave-deep: #6B4A33; /* dark earth — footer/deep surfaces (violet-900 alternative, per co-badging) */
    --soc-batik-ink:  #3A2E26; /* batik resist-line dark — pattern linework on paper */
    --soc-warm-spectrum: linear-gradient(135deg, #E8A13D, #E0BE55, #D77A61);

    /* ═ Semantic — surfaces ═ */
    --soc-surface-page:   var(--soc-paper); /* Addendum v2: the ground warms */
    --soc-surface-card:   var(--soc-white);
    --soc-surface-tint:   var(--soc-violet-100);
    --soc-surface-chrome: var(--soc-violet-700);
    --soc-surface-deep:   var(--soc-violet-900);

    /* ═ Semantic — text ═ */
    --soc-text-primary:   var(--soc-charcoal);
    --soc-text-secondary: var(--soc-ink-60);
    --soc-text-inverse:   var(--soc-white);
    --soc-text-brand:     var(--soc-violet-900);

    /* ═ Semantic — interactive ═ */
    --soc-interactive:        var(--soc-violet-700);
    --soc-interactive-hover:  var(--soc-violet-500);
    --soc-accent:             var(--soc-gold-600);
    --soc-accent-hover:       var(--soc-gold-400);

    /* ═ Semantic — feedback (UI only; never story colors) ═ */
    --soc-success: #2E5E3C;
    --soc-warning: #8A6D1F;
    --soc-error:   #7A3B5E; /* plum — deliberately not threat red */
    --soc-focus:   #E0BE55;

    /* ═ Typography (Addendum v2) ═
       Display: Fraunces is RETIRED. Wordmark + arc titles + chapter markers become
       commissioned Ugandan hand-lettering (SVG, credited, paid). Georgia is the
       interim fallback only. UI: system stack first — 3G pragmatism, stated plainly. */
    --font-ui: system-ui, -apple-system, 'Segoe UI', 'Inter', sans-serif;
    --font-display: Georgia, 'Times New Roman', serif; /* interim until lettering commission lands */
    --text-xs: 0.8125rem;  /* 13px */
    --text-sm: 0.9375rem;  /* 15px */
    --text-base: 1.0625rem;/* 17px — body floor */
    --text-lg: 1.1875rem;  /* 19px — reader captions */
    --text-xl: 1.375rem;   /* 22px */
    --text-2xl: 1.75rem;   /* 28px */
    --text-3xl: 2.25rem;   /* 36px */
    --leading-tight: 1.2;
    --leading-base: 1.5;
    --leading-relaxed: 1.7;

    /* ═ Spacing ═ */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

    /* ═ Radius ═ */
    --radius-panel: 8px;
    --radius-card: 12px;
    --radius-pill: 999px;

    /* ═ Elevation ═ */
    --shadow-card:   0 2px 8px rgba(38,34,43,.08);
    --shadow-raised: 0 6px 20px rgba(38,34,43,.14);

    /* ═ Motion (300ms is the ceiling everywhere) ═ */
    --motion-calm: 200ms ease-out;
    --motion-slow: 300ms ease-out;

    /* ═ Layout ═ */
    --touch-target-min: 44px;
    --reader-max-width: 480px;
  }
}

@layer soc.base {
  @media (prefers-reduced-motion: reduce) {
    :root { --motion-calm: 0ms linear; --motion-slow: 0ms linear; }
    *, *::before, *::after { animation: none !important; transition-property: opacity !important; }
  }

  /* Focus — never removed */
  :focus-visible { outline: 3px solid var(--soc-focus); outline-offset: 2px; }
}