/* Treadbox.io design tokens (webdesign/direction1, "Prompt for Claude Code.txt"). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  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: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Native controls (select, checkbox, scrollbars) follow the scheme; there is no toggle. */
  color-scheme: light dark;

  /* Brand */
  --ground: #f4f5f7; /* silver fog */
  --ink: #2f3a4b; /* slate navy */
  --accent: #cc1836; /* crimson, used sparingly */
  --metal-1: #ffffff;
  --metal-2: #9cb0c7;
  --metal-3: #43556e;

  /* Derived */
  --ink-soft: #55637a; /* secondary text; 5.5:1 on the ground */
  --ink-faint: rgba(47, 58, 75, 0.1); /* outlined numerals */
  --line: rgba(47, 58, 75, 0.12); /* hairlines between rows */
  --line-strong: #2f3a4b; /* grid lines of the specimen layout */
  --box: #eaecef; /* specimen boxes */
  --accent-wash: rgba(204, 24, 54, 0.08);
  --on-ink: var(--metal-1); /* text on an ink or accent fill */
  --wash-strong: rgba(255, 255, 255, 0.8); /* white ink washes behind the wordmark */
  --wash-soft: rgba(255, 255, 255, 0.6);
  --wash-none: rgba(255, 255, 255, 0);
  --metal-shadow: drop-shadow(0 12px 20px rgba(67, 85, 110, 0.2)) drop-shadow(0 2px 4px rgba(255, 255, 255, 0.4));

  /* Surfaces and states. Every colour a rule needs has a token here; the dark scheme below
     redefines each one, and scripts/check-contrast.mjs checks the pairs in both. */
  --surface: #ffffff; /* form controls and quiet buttons: the "white card" */
  --row-hover: rgba(255, 255, 255, 0.6); /* leaderboard row under the pointer */
  --placeholder: var(--ink-soft); /* MM / DD / YYYY in the date parts */
  --error: var(--accent); /* validation message text and field outline */
  --error-wash: var(--accent-wash); /* behind the error summary */
  --band-high-bg: var(--ink); /* confidence chips */
  --band-high-fg: var(--ground);
  --band-medium: var(--ink);
  --band-low: var(--ink-soft);
  --photo-frame: var(--line); /* border of a contributor photo */
  --photo-filter: none; /* photos are dimmed a little in the dark scheme */

  /* The metallic gradient: wordmarks and large numerals only. */
  --metal-vertical: linear-gradient(
    to bottom,
    #ffffff 0%,
    #d6e0ea 25%,
    #9cb0c7 45%,
    #5a708a 50%,
    #43556e 52%,
    #768da6 75%,
    #b5c6d8 100%
  );
  --metal-diagonal: linear-gradient(135deg, var(--metal-1) 0%, var(--metal-2) 45%, var(--metal-3) 100%);

  /* Grain overlay (inline SVG noise). */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

  /* Type */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Space */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 62rem;
}

/* Dark scheme: the same names, system setting only (no toggle, no script). The ground is a
   slate in the brand's navy hue, never pure black. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Brand */
    --ground: #151a22;
    --ink: #e6ebf2;
    --accent: #f55c75; /* crimson lifted to 4.5:1 on the dark ground */
    --metal-1: #f4f7fb;
    --metal-2: #a9bbd0;
    --metal-3: #8ea4bf;

    /* Derived */
    --ink-soft: #a3b0c3;
    --ink-faint: rgba(230, 235, 242, 0.1);
    --line: rgba(230, 235, 242, 0.14);
    --line-strong: #7f8da1;
    --box: #1d232d;
    --accent-wash: rgba(245, 92, 117, 0.12);
    --on-ink: #151a22; /* text on an ink or accent fill: both are light here */
    --wash-strong: rgba(142, 164, 191, 0.13);
    --wash-soft: rgba(142, 164, 191, 0.07);
    --wash-none: rgba(142, 164, 191, 0);
    --metal-shadow: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 3px rgba(190, 210, 235, 0.15));

    /* A darker metallic ramp: bright at the top, never below 3:1 on the ground. */
    --metal-vertical: linear-gradient(
      to bottom,
      #f4f7fb 0%,
      #d6e0ea 25%,
      #a9bbd0 45%,
      #8aa0ba 50%,
      #7d95b0 52%,
      #97adc6 75%,
      #c2d0df 100%
    );

    /* Grain: the same noise at lower strength. */
    --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");

    /* Surfaces and states */
    --surface: #1b212a;
    --row-hover: rgba(230, 235, 242, 0.05);
    --placeholder: #9aa7ba;
    --error: #ff7a8f;
    --error-wash: rgba(255, 122, 143, 0.14);
    --band-high-bg: #d6e0ea;
    --band-high-fg: #151a22;
    --band-medium: #e6ebf2;
    --band-low: #a3b0c3;
    --photo-frame: rgba(230, 235, 242, 0.28);
    --photo-filter: brightness(0.88);
  }
}