/* =========================================================================
   SEO Studio Tools — design tokens
   YouTube SEO, measured.

   Every value here is a decision, not a default. Colour pairs are verified
   against WCAG AA in docs/BRAND.md; do not introduce a colour that is not
   in this file.
   ========================================================================= */

/* --- Typefaces: self-hosted, never fetched from a third party ----------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-700.woff2") format("woff2");
}

:root {
  /* --- Colour: light ---------------------------------------------------- */
  --bg:            #FAFAF8;
  --surface:       #FFFFFF;
  --surface-2:     #F4F4F1;
  --line:          #E6E4DF;
  --line-strong:   #838991;

  --ink:           #0B1220;
  --ink-2:         #3B4252;
  --ink-3:         #666E7C;

  /* Green means one thing only: measured evidence. */
  --accent:        #0F6B3E;
  --accent-soft:   #E6F4EC;
  --on-accent:     #FFFFFF;

  /* Amber means one thing only: untested / no evidence. */
  --warn:          #B45309;
  --warn-soft:     #FEF3E2;
  --on-warn:       #FFFFFF;

  --focus:         #1D4ED8;

  /* Code surfaces stay dark in both themes. */
  --code-bg:       #0E1626;
  --code-ink:      #E6EDF3;
  --code-muted:    #9AA7BD;
  --code-accent:   #7EE2B8;
  --code-line:     #1E2A44;
  --code-btn:      #1B2740;
  --code-btn-line: #33415C;
  --code-btn-hover:#26344F;

  --shadow: 0 1px 2px rgba(11, 18, 32, .06), 0 4px 12px rgba(11, 18, 32, .06);

  /* --- Type ------------------------------------------------------------- */
  --font-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans Arabic", "Segoe UI Arabic",
               Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, monospace;

  --t-3xl: 3rem;      /* 48 */
  --t-2xl: 2.25rem;   /* 36 */
  --t-xl:  1.75rem;   /* 28 */
  --t-lg:  1.375rem;  /* 22 */
  --t-md:  1.125rem;  /* 18 */
  --t-base: 1rem;     /* 16 */
  --t-sm:  0.875rem;  /* 14 */
  --t-xs:  0.75rem;   /* 12 */

  --lh-head: 1.2;
  --lh-body: 1.6;
  --measure: 68ch;

  /* --- Space ------------------------------------------------------------ */
  --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 ------------------------------------------------------------ */
  --r-1: 6px;
  --r-2: 10px;
  --r-pill: 999px;

  --container: 1160px;
  --header-h: 64px;
}

/* --- Colour: dark ------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0B1220;
    --surface:     #111A2E;
    --surface-2:   #16213A;
    --line:        #1F2A44;
    --line-strong: #6274A0;

    --ink:         #F3F4F6;
    --ink-2:       #C7CCD6;
    --ink-3:       #8B93A5;

    --accent:      #34D399;
    --accent-soft: #0E2C22;
    --on-accent:   #0B1220;

    --warn:        #F59E0B;
    --warn-soft:   #3A2A0C;
    --on-warn:     #0B1220;

    --focus:       #93B4FF;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --bg:          #0B1220;
  --surface:     #111A2E;
  --surface-2:   #16213A;
  --line:        #1F2A44;
  --line-strong: #5C6B93;

  --ink:         #F3F4F6;
  --ink-2:       #C7CCD6;
  --ink-3:       #8B93A5;

  --accent:      #34D399;
  --accent-soft: #0E2C22;
  --on-accent:   #0B1220;

  --warn:        #F59E0B;
  --warn-soft:   #3A2A0C;
  --on-warn:     #0B1220;

  --focus:       #93B4FF;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
}

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