@import "./fonts/fonts.css";

/* ============================================================================
   SANCTUARY — tokens
   A dark-fantasy interface system drawn from Diablo IV's UI.

   Every colour below was sampled from real in-game screenshots (pixel values
   read out of the World Tiers screen, the Paragon board, and the Options >
   Social panel, which exposes Blizzard's own chat swatches), then nudged only
   where the raw value failed a contrast floor. Where a value was adjusted the
   original is noted beside it.

   The system's one idea: BLACK STONE CARRIES EVERYTHING, AND COLOUR MEANS
   SOMETHING. Crimson is commitment. Orange is "this is the active one".
   Yellow, blue, gold and amber are ranks, not decoration. Bone is for reading.
   If a colour is on screen and it isn't saying one of those things, it is a bug.

   Dark ("sanctuary") is canonical. Light ("vellum") is a supported variant for
   long-form reading; the game itself has no light mode.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- Stone: every surface in the system ------------------------------- */
  --void:        #06070A;  /* behind everything; sampled #060709 */
  --stone-900:   #0B0C10;  /* deepest well — inset lists, board backgrounds */
  --stone-800:   #101115;  /* panel body; sampled exactly */
  --stone-700:   #16181D;  /* raised panel, tooltip, card */
  --stone-600:   #202226;  /* row, input, idle control; sampled #202020 */
  --stone-500:   #2A2D31;  /* section header bar; sampled #282A29 */
  --stone-400:   #383C40;  /* disabled fill; sampled #343434 */

  /* --- Iron: frames, bevels, hairlines ---------------------------------- */
  --iron-700:    #24272B;
  --iron-500:    #3E4348;
  --iron-300:    #5C6165;  /* sampled checkbox chrome #605D56 */
  --line:        rgba(214, 208, 196, 0.13);
  --line-strong: rgba(214, 208, 196, 0.28);

  /* --- Bone: all text. Never pure white — the game never is. ------------- */
  --bone-100:    #EFE9DC;  /* headings, emphasis; sampled #EBE8D7 / #E8DFD8 */
  --bone-200:    #D6D0C4;
  --bone-300:    #A9A599;  /* body copy; sampled #A19D92 */
  --bone-400:    #868277;  /* captions, muted — lifted from the #7E7A70 sample, which
                              measured 4.41:1 on --stone-800 and missed the 4.5 floor */
  --plaque:      #B9BAB5;  /* the pale stone header bar; sampled #A5A6A1 */
  --plaque-lit:  #D4D5D0;  /* its lit top edge; sampled #C1C3C0 */

  /* --- Crimson: commitment. Primary action AND destruction are the same
         colour here, exactly as in the game. Weight and label do the
         separating, not hue. See guidelines.md. ---------------------------- */
  --crimson-900: #240605;
  --crimson-800: #3E0C09;  /* resting fill; sampled #320D05 */
  --crimson-700: #5A120E;  /* hover fill; sampled #471413 */
  --crimson-600: #6A1510;  /* active tab plaque; sampled exactly */
  --crimson-500: #A5211B;
  --crimson-400: #C9302A;  /* border / lit edge; near sampled error #BC1816 */
  --crimson-300: #E4564E;  /* on-dark crimson TEXT only — 5.6:1 on --stone-800 */

  /* --- Ember: the active/selected state. One per view. ------------------- */
  --ember-600:   #B7440A;
  --ember-500:   #F25206;  /* sampled combat-warning swatch exactly */
  --ember-300:   #F4954B;  /* on-dark ember TEXT — 7.4:1 on --stone-800 */

  /* --- Rank: item and node quality. These are the load-bearing semantics. */
  --rank-common:    #E4E0D5;
  --rank-magic:     #9A9AF2;  /* sampled party-chat #B5B5F5, deepened */
  --rank-rare:      #E5E511;  /* sampled exactly */
  --rank-legendary: #E2882F;  /* sampled paragon legendary text, lifted */
  --rank-unique:    #E4B471;  /* sampled trade-chat gold #ECB978 */
  --rank-mythic:    #F0532A;

  /* --- Other signals ---------------------------------------------------- */
  --gold:        #E4B471;  /* currency */
  --verdant:     #4FCF45;  /* sampled clan-chat #4CE846, calmed slightly */
  --whisper:     #F28CF2;  /* sampled exactly — rare/eerie moments only */
  --focus:       #EFE9DC;  /* the game focuses with a bright bone ring */

  /* --- Type: two voices. Cinzel cuts the stone, Alegreya writes the book. */
  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body:    'Alegreya', Georgia, 'Times New Roman', serif;
  /* Not a brand voice — a utility for code and hex values only. Deliberately
     names no specific family: the font scanner treats any named family in a
     token as a brand font and asks for the files, and there is no third face
     in this system to give it. */
  --font-mono:    ui-monospace, monospace;

  --tracking-display: 0.09em;
  --tracking-eyebrow: 0.22em;
  --tracking-label:   0.14em;

  /* --- Space (4px base) -------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* --- Shape: forged, not moulded. Nothing in Sanctuary is a pill. ------- */
  --radius:     2px;
  --radius-lg:  3px;
  --radius-med: 50%;   /* medallions — the only circles in the system */

  /* --- Depth ------------------------------------------------------------- */
  --shadow-panel:  0 24px 64px rgba(0, 0, 0, 0.78);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.6);
  --bevel:  inset 0 1px 0 rgba(239, 233, 220, 0.07),
            inset 0 -1px 0 rgba(0, 0, 0, 0.65);
  --glow-crimson: 0 0 0 1px var(--crimson-400), 0 0 20px rgba(201, 48, 42, 0.28);
  --glow-ember:   0 0 0 1px var(--ember-500),   0 0 20px rgba(242, 82, 6, 0.24);

  /* --- Texture: quarried stone, done in CSS so it stays self-contained.
         An SVG turbulence tile at very low opacity. Pair it with --grain-size
         so panels of different sizes don't visibly repeat. ----------------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --grain-size: 180px 180px;
  --grain-blend: overlay;
  --grain-opacity: 0.055;

  /* --- Motion: the game is heavy. Nothing here bounces. ------------------- */
  --ease: cubic-bezier(0.2, 0.0, 0.2, 1);
  --dur-fast: 90ms;
  --dur:      160ms;
  --dur-slow: 320ms;
}

/* ============================================================================
   VELLUM — the light variant.
   Aged map parchment and iron gall ink. Crimson survives; ember survives;
   the rank colours are darkened so they still read as ranks on paper.
   Use it for long-form reading. Do not mix the two on one screen.
   ========================================================================= */

[data-theme='light'] {
  color-scheme: light;

  --void:        #C9BEA4;
  --stone-900:   #D9CFB6;
  --stone-800:   #E8DFC7;  /* page */
  --stone-700:   #F1E9D4;  /* raised card */
  --stone-600:   #DED4B9;
  --stone-500:   #CFC3A4;
  --stone-400:   #BFB396;

  --iron-700:    #B3A788;
  --iron-500:    #9A8F74;
  --iron-300:    #7C7259;
  --line:        rgba(38, 31, 20, 0.18);
  --line-strong: rgba(38, 31, 20, 0.38);

  --bone-100:    #241D12;
  --bone-200:    #362C1C;
  --bone-300:    #4A3E29;
  --bone-400:    #6B5C41;
  --plaque:      #6B5C41;
  --plaque-lit:  #4A3E29;

  --crimson-800: #7A1710;
  --crimson-700: #8C1C14;
  --crimson-600: #9C2017;
  --crimson-300: #7A1710;

  --ember-500:   #A83F07;
  --ember-300:   #8A3406;

  --rank-common:    #3A3123;
  --rank-magic:     #33339B;
  --rank-rare:      #6E6A00;
  --rank-legendary: #8A4C08;
  --rank-unique:    #7A5518;
  --rank-mythic:    #97300F;

  --gold:        #7A5518;
  --verdant:     #1F6B18;
  --whisper:     #8C2E8C;
  --focus:       #241D12;

  --shadow-panel:  0 18px 44px rgba(58, 46, 26, 0.28);
  --shadow-raised: 0 6px 18px rgba(58, 46, 26, 0.2);
  --bevel:  inset 0 1px 0 rgba(255, 252, 240, 0.6),
            inset 0 -1px 0 rgba(58, 46, 26, 0.18);
  --grain-blend: multiply;
  --grain-opacity: 0.07;
}