/**
 * @file theme.css
 * GG Press brand: design tokens and the few base rules that apply them.
 *
 * Broadcast design system (docs/design/home/, Option 1): condensed uppercase
 * headings, square corners, thin rules, gold as the broadcast accent, cyan
 * for links and small data, red only for the live state.
 *
 * The token names are Mercury's shadcn/ui-compatible variables, which the
 * compiled Tailwind CSS (build/main.min.css) reads at runtime, so changing a
 * value here needs no rebuild. GG Press is dark only: there is a single set of
 * tokens, no `.dark` variant and no theme setting to switch schemes.
 *
 * Every text/surface pair below meets WCAG AA (4.5:1), checked by
 * recipes/ggpress_theme/tests/src/Kernel/GgpressThemeRecipeTest.php.
 */

:root {
  /* Brand palette (README.md, "Brand"). */
  --gg-navy: #002c5e;
  --gg-navy-deep: #022243;
  --gg-gold: #f8d04a;
  --gg-cyan: #00c4d6;
  --gg-royal: #0068d0;
  --gg-white: #ffffff;

  /* Broadcast surfaces: shades of the brand navy. Ratios are WCAG contrast. */
  --surface-ink: #011329; /* page base: a darker shade of the deep navy */
  --surface-deep: #000c1c; /* footer */
  --surface-raised: #06305f; /* raised panels, hover rows */

  /* Semantic tokens (Mercury's names). */
  --background: var(--surface-ink); /* surface */
  --foreground: var(--gg-white); /* 18.64:1 on background */
  --card: var(--gg-navy-deep);
  --card-foreground: var(--gg-white); /* 16.00:1 */
  --primary: var(--gg-gold); /* broadcast accent, primary actions; 12.53:1 as text */
  --primary-foreground: var(--gg-navy-deep); /* 10.75:1 on gold */
  --secondary: var(--gg-royal); /* never as text on navy (2.56:1) */
  --secondary-foreground: var(--gg-white); /* 5.40:1 on royal blue */
  --muted: var(--surface-raised);
  --muted-foreground: #b9c8de; /* 10.99:1 on background, 7.76:1 on muted, 9.43:1 on card */
  --accent: var(--gg-cyan); /* links and small data; 8.76:1 as text on background */
  --accent-foreground: var(--gg-navy-deep); /* 7.52:1 on cyan */
  --destructive: #c62828;
  --destructive-foreground: var(--gg-white); /* 5.62:1 */
  --link: var(--gg-cyan); /* 8.76:1 on background, 7.52:1 on card */
  --border: #1b3f6e; /* hairlines, decorative dividers */
  --input: #6e8bb5; /* form field outlines: 5.35:1 (non-text, ≥ 3:1) */

  /* The live state is the only use of red (header score bug, live heading). */
  --live: #c8102e;
  --live-foreground: var(--gg-white); /* 5.88:1 on live */

  /* Tailwind's red-500 marks form errors and required fields; the default is
     too dark on navy. */
  --color-red-500: #ff8a8a; /* 8.22:1 on background */

  --font-sans: "Inter", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  /* Montserrat ExtraBold only where the wordmark is set in text. */
  --font-wordmark: "Montserrat", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* Square corners everywhere (see the rounded-* override below). */
  --radius: 0;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Broadcast typography: display (heading) tracking used by UI labels. */
  --tracking-label: 0.1em;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 18);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 20);
  }
}

/*
 * Added to Tailwind's base layer (declared by main.min.css), so utility
 * classes on an element still win over these.
 */
@layer base {
  html {
    color-scheme: dark;
    background-color: var(--background);
    /* Full-bleed strips (.ggpress-bleed) are 100vw wide, which includes the
       scrollbar: clip that overflow instead of scrolling sideways. */
    overflow-x: clip;
  }

  /* Headings: Barlow Condensed ExtraBold, uppercase. Components set heading
     weights with font-medium/semibold/bold utilities, which read these
     variables. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    --font-weight-medium: 800;
    --font-weight-semibold: 800;
    --font-weight-bold: 800;
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.05;
    text-transform: uppercase;
  }

  /* Links in content (component links carry their own classes). In running
     text they are underlined too: cyan alone is only 2.13:1 against white. */
  a:not([class]) {
    color: var(--link);
  }

  :where(p, li, dd, td, blockquote, figcaption) a:not([class]) {
    text-decoration-line: underline;
    text-underline-offset: 2px;
  }

  /* Status messages are light toasts: keep their own text colour. */
  [data-drupal-messages] a {
    color: inherit;
  }

  :focus-visible {
    outline: 3px solid var(--gg-gold);
    outline-offset: 3px;
  }
}

/*
 * Square corners: the compiled Tailwind utilities derive rounded-sm/md/xl from
 * --radius with calc() offsets, which don't resolve to 0 when the token is 0.
 * Unlayered, so it wins over the utilities layer; the live dot and avatars
 * keep rounded-full.
 */
[class*="rounded-"]:not([class*="rounded-full"]) {
  border-radius: 0;
}