/* Adel Studio — shared design tokens
   Source of truth. Each app copies this into its own assets/ folder so every
   deployment stays self-contained (no CDN, no cross-site fetch). */

@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Brand — fixed in both themes */
  --navy:   #00205B;
  --blue:   #0057B8;
  --sky:    #4A9BE8;

  /* FIGC figure palette. Canonical print values (300 dpi, white paper) are
     listed here for reference; the per-theme blocks below override them with
     screen-safe equivalents. Entity mapping never changes — red is always the
     primary series, wwblue always the literature benchmark, and so on.
     Measured on white: canonical --fig-silver is 1.62:1 and --fig-grey 2.50:1,
     both under the 3:1 WCAG floor for graphical objects, so a threshold line
     drawn in canonical silver is invisible on screen. */
  --fig-red:    #D32F2F;  /* primary series      — print canonical */
  --fig-black:  #1A1A1A;  /* secondary series    — print canonical */
  --fig-grey:   #9AA5B1;  /* reference/inactive  — print canonical */
  --fig-wwblue: #1F4E79;  /* literature benchmark— print canonical */
  --fig-band:   #E8F0F8;  /* benchmark band fill — print canonical */
  --fig-silver: #C4CCD4;  /* dashed thresholds   — print canonical */

  /* Semantic — light-theme values; the dark blocks override all three.
     These carry validation and error text, so they are held to the 4.5:1 text
     floor, not the 3:1 graphical one. The old single-value set failed: --warn
     measured 4.24 light / 4.42 dark, --bad 5.62 light / 2.82 dark. */
  --ok:   #1E7A4C;  /* 5.33:1 on white */
  --warn: #8A5200;  /* 6.39:1 on white — #B26A00 failed at 4.24 */
  --bad:  #C62828;  /* 5.62:1 on white */

  /* Type */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;

  /* Geometry */
  --radius: 10px;
  --radius-sm: 6px;
  --maxw: 1240px;
  --gut: clamp(1rem, 3vw, 2.5rem);

  color-scheme: light;
}

/* ---- Light (default) ---- */
:root,
:root[data-theme="light"] {
  --ground:  #FFFFFF;
  --surface: #F5F7FA;
  --raised:  #FFFFFF;
  --line:    #DDE3EA;
  --ink:     #10161F;
  --muted:   #4A5765;
  --faint:   #5F6B78;   /* 5.44:1 on --ground, 5.07:1 on --surface. Never
                           lighten: #6E7C8C measures 4.26/3.97 and fails AA. */
  --accent:  var(--blue);
  --link:    var(--accent);   /* R13: link colour, unchanged in light */
  --on-accent: #FFFFFF; /* 6.87:1 on --blue */
  --shadow:  0 1px 2px rgba(16, 22, 31, .06), 0 6px 20px rgba(16, 22, 31, .06);

  /* Screen-safe figure palette — light. Both clear the 3:1 floor on white AND
     sit 2.00:1 apart from each other, so the reference series and the dashed
     threshold stay tellable apart. Contrast alone is not enough here: pushing
     both above 3:1 collapses them together unless the gap is checked too. */
  --fig-grey:   #59636F;  /* 6.11:1 vs ground, 2.00:1 vs silver */
  --fig-silver: #8A95A1;  /* 3.05:1 vs ground */
  color-scheme: light;
}

/* ---- Dark ----
   WARNING: the dark palette is declared TWICE below — once inside the
   prefers-color-scheme media query (for users who never touched the toggle)
   and once on :root[data-theme="dark"] (for users who did). The two blocks use
   different indentation, so a search-and-replace keyed on leading whitespace
   silently updates only one of them. Every change here must be made in BOTH,
   then checked by rendering with data-theme="dark" set explicitly — that path
   exercises the second block, and it is the one that gets missed. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:  #0B0C0E;   /* neutral graphite ground — replaces the navy #0B1220 */
    --surface: #191C20;   /* nested/recessed surfaces inside a panel            */
    --raised:  #131518;   /* panels and cards                                   */
    --line:    rgba(255, 255, 255, .09);
    --ink:     #F4F6F8;   /* 18.06:1 on --ground */
    --muted:   #A7AEB6;   /* 8.73:1 on --ground */
    --faint:   #7D858E;   /* 5.23:1 on --ground, 4.57:1 on --surface */
    --accent:  var(--sky);
    --link:    #5F7EC0;   /* R13 muted royal-blue link accent, ~4.9:1 on --ground */
    --on-accent: #0B0C0E; /* 6.66:1 on --sky; #FFF would be 2.94:1 */
    --shadow:  0 1px 2px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .45);
    --fig-red:    #E8544F;  /* 5.18:1 — canonical #D32F2F is only 3.76 here */
    --fig-black:  #E3E9F2;  /* secondary series inverts; canonical is 1.08:1 */
    --fig-wwblue: #6AA3D8;  /* 6.99:1 — canonical #1F4E79 is 2.16:1 */
    --fig-grey:   #9AA5B1;  /* 7.48:1 — canonical. Must be restated here: without
                               it, dark inherits the light override and the two
                               greys collapse to 1.07:1 apart, i.e. identical. */
    --fig-silver: #5E6E82;  /* 3.59:1 vs ground, 2.08:1 vs grey */
    --fig-band:   #16283C;
    --ok:   #4ED08A;  /* 9.55:1 — light #1E7A4C is 3.52 here */
    --warn: #E8A33D;  /* 8.68:1 — light #8A5200 is unreadable here */
    --bad:  #FF6B6B;  /* 6.75:1 — light #C62828 is 3.33 here */
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground:  #0B0C0E;   /* neutral graphite ground — replaces the navy #0B1220 */
  --surface: #191C20;   /* nested/recessed surfaces inside a panel            */
  --raised:  #131518;   /* panels and cards                                   */
  --line:    rgba(255, 255, 255, .09);
  --ink:     #F4F6F8;   /* 18.06:1 on --ground */
  --muted:   #A7AEB6;   /* 8.73:1 on --ground */
  --faint:   #7D858E;   /* 5.23:1 on --ground, 4.57:1 on --surface */
  --accent:  var(--sky);
  --link:    #5F7EC0;   /* R13 muted royal-blue link accent, ~4.9:1 on --ground */
  --on-accent: #0B0C0E; /* 6.66:1 on --sky; #FFF would be 2.94:1 */
  --shadow:  0 1px 2px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .45);
  --fig-red:    #E8544F;  /* 5.18:1 — canonical #D32F2F is only 3.76 here */
  --fig-black:  #E3E9F2;  /* secondary series inverts; canonical is 1.08:1 */
  --fig-wwblue: #6AA3D8;  /* 6.99:1 — canonical #1F4E79 is 2.16:1 */
  --fig-grey:   #9AA5B1;  /* 7.48:1 — canonical. Must be restated here: without
                             it, dark inherits the light override and the two
                             greys collapse to 1.07:1 apart, i.e. identical. */
  --fig-silver: #5E6E82;  /* 3.59:1 vs ground, 2.08:1 vs grey */
  --fig-band:   #16283C;
  --ok:   #4ED08A;  /* 9.55:1 — light #1E7A4C is 3.52 here */
  --warn: #E8A33D;  /* 8.68:1 — light #8A5200 is unreadable here */
  --bad:  #FF6B6B;  /* 6.75:1 — light #C62828 is 3.33 here */
  color-scheme: dark;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.011em; }
h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }
a  { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

/* Inputs */
input[type="number"], input[type="text"], input[type="password"], select, textarea {
  width: 100%;
  font: inherit;
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .5rem .65rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .3rem; }
.hint { font-size: .76rem; color: var(--faint); margin-top: .25rem; }

button, .btn {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: .55rem 1rem;
}
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button:disabled { opacity: .5; cursor: not-allowed; }

table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Wide content must scroll inside its own box — the page never scrolls sideways */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Topbar + theme toggle */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 1rem; min-height: 58px; }
.brand { font-weight: 700; letter-spacing: -.02em; margin-right: auto; }
.brand small { display: block; font-family: var(--font-mono); font-size: .66rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.theme-btn {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: var(--radius-sm); padding: .35rem .7rem;
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
}

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 3rem; padding: 1.75rem 0;
  font-size: .82rem; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}