/* ==========================================================================
   Itzal — brand tokens
   The single source of truth for colour and type. Both the brand kit and the
   home page link this file; nothing else may define a colour or a font.

   If you need a value that isn't here, the answer is almost always one of
   these values used differently — not a new one. Add to this file only after
   the brand kit documents what the new token means.

   Derived from the Itzal architecture design system. Two colours carry
   meaning and must never be swapped:

     seal (petrol)  what has been redacted, sealed, made safe to transmit
     raw  (cherry)  raw sensitive data, the device boundary, an open gap

   Using cherry decoratively — as a highlight, an accent, a hover — breaks the
   only visual convention the product actually relies on.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typefaces — self-hosted, latin subset, woff2 only.
   Archivo and IBM Plex Sans are variable; two files cover four weights.
   No external request is made for type. For a vendor whose claim is "nothing
   leaves the device", a font call to a third party is a credibility bug.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-var-latin.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Palette — light is the base
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Grounds */
  --paper:    #eef1f4;   /* page ground — cool, never pure white           */
  --surface:  #ffffff;   /* raised panel                                    */
  --sunk:     #e3e8ec;   /* recessed: code, wells, table headers            */

  /* Type */
  --ink:      #12171d;   /* primary text, headings                          */
  --slate:    #59656f;   /* secondary text, captions, labels                */
  --line:     #c9d2d8;   /* hairlines, borders, dividers                    */

  /* Seal — petrol. Redacted, sealed, safe to transmit. The only accent.
     --seal-2 is the same hue lifted, for gradients, hovers and motion
     highlights. It is a tint, not a second meaning: anything petrol still
     means sealed, whichever of the two is carrying it. */
  --seal:     #0f6076;
  --seal-2:   #1b8ca6;
  --seal-bg:  #e0eef2;

  /* Raw — cherry. Raw data, the device boundary, an open gap. Meaning only. */
  --raw:      #8d2740;
  --raw-bg:   #f7eaed;

  /* The band — full-bleed brand block. Constant across themes: it is the
     one place the brand asserts itself rather than adapting. */
  --band:      #0f6076;
  --band-grad: linear-gradient(158deg, #12687f 0%, #0f5568 52%, #0b4152 100%);
  --band-ink:  #f1f7f9;
  --band-dim:  #a6cbd6;
  --band-line: rgba(241, 247, 249, 0.22);

  /* Accents for use ON the band. The band is a constant deep petrol in both
     themes, so its accents are constant too — the light-mode --raw (#8d2740)
     is unreadable against it. Same meanings as everywhere else: seal is
     sealed, raw is raw. */
  --band-seal: #6fd3e6;
  --band-raw:  #e58099;

  /* Typefaces */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii — sharp. Controls are instruments, not pills. 2px is the ceiling. */
  --r:    2px;
  --r-lg: 2px;

  /* Rhythm */
  --wrap: 1200px;
  --gut:  clamp(1.5rem, 5vw, 5rem);
  --sec:  clamp(4rem, 9vw, 8rem);

  /* Texture — a 45° pinstripe, barely there. Gives flat colour a surface. */
  --grain: repeating-linear-gradient(45deg,
             transparent 0 3px, rgba(18, 23, 29, 0.016) 3px 4px);
  --grain-band: repeating-linear-gradient(45deg,
             transparent 0 3px, rgba(255, 255, 255, 0.035) 3px 4px);

  --shadow: 0 1px 2px rgba(18, 23, 29, .05), 0 10px 28px -16px rgba(18, 23, 29, .18);
  --shadow-lift: 0 2px 4px rgba(18, 23, 29, .05), 0 18px 40px -22px rgba(18, 23, 29, .30);

  /* Motion. One easing curve for everything that moves, three durations.
     --t1 is a state change you shouldn't notice; --t2 is an element arriving;
     --t3 is a sequence playing. Anything slower is the page wasting someone's
     time. Every rule that uses these must degrade to nothing under
     prefers-reduced-motion. */
  --ease: cubic-bezier(.22, .68, .3, 1);
  --t1: 150ms;
  --t2: 320ms;
  --t3: 620ms;
}

/* --------------------------------------------------------------------------
   Dark — colour tokens only. Never spacing, never type, never layout.
   A theme that changes more than colour is two designs to maintain.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper:    #0a0f13;
    --surface:  #151c22;
    --sunk:     #1b242b;

    --ink:      #e5ebef;
    --slate:    #93a1ac;
    --line:     #2b353d;

    --seal:     #6fd3e6;
    --seal-2:   #3fa9c2;
    --seal-bg:  #0e2831;

    --raw:      #e58099;
    --raw-bg:   #2a1720;

    /* Deeper, so a full-bleed band doesn't blaze against a near-black page. */
    --band:      #0c4050;
    --band-grad: linear-gradient(158deg, #105163 0%, #0b3e4d 52%, #072d39 100%);
    --band-ink:  #e0edf1;
    --band-dim:  #8db6c2;
    --band-line: rgba(224, 237, 241, 0.18);

    --grain: repeating-linear-gradient(45deg,
               transparent 0 3px, rgba(229, 235, 239, 0.018) 3px 4px);
    --grain-band: repeating-linear-gradient(45deg,
               transparent 0 3px, rgba(255, 255, 255, 0.028) 3px 4px);

    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 32px -18px rgba(0, 0, 0, .8);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 22px 46px -24px rgba(0, 0, 0, .95);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:    #0a0f13;
  --surface:  #151c22;
  --sunk:     #1b242b;

  --ink:      #e5ebef;
  --slate:    #93a1ac;
  --line:     #2b353d;

  --seal:     #6fd3e6;
  --seal-2:   #3fa9c2;
  --seal-bg:  #0e2831;

  --raw:      #e58099;
  --raw-bg:   #2a1720;

  --band:      #0c4050;
  --band-grad: linear-gradient(158deg, #105163 0%, #0b3e4d 52%, #072d39 100%);
  --band-ink:  #e0edf1;
  --band-dim:  #8db6c2;
  --band-line: rgba(224, 237, 241, 0.18);

  --grain: repeating-linear-gradient(45deg,
             transparent 0 3px, rgba(229, 235, 239, 0.018) 3px 4px);
  --grain-band: repeating-linear-gradient(45deg,
             transparent 0 3px, rgba(255, 255, 255, 0.028) 3px 4px);

  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 32px -18px rgba(0, 0, 0, .8);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 22px 46px -24px rgba(0, 0, 0, .95);
}