/* GEOScope design tokens — Joram brand palette/type, light/dark via
   prefers-color-scheme, overridden by [data-theme]. */

:root {
  /* Joram primaries */
  --color-oxford-blue: #0a1137;
  --color-baby-powder: #f5f7f3;
  --color-madder: #a6112f;
  --color-madder-dark: #f0a4b0;
  --color-rose-quartz: #aca6bb;
  --color-ink-black: #0d0d1a;

  /* Type */
  --font-heading: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --tracking-heading: -0.01em;

  --display-1: 700 clamp(3.5rem, 6vw + 1rem, 6rem) / 1.02 var(--font-heading);
  --h1: 800 clamp(2.25rem, 2.5vw + 1rem, 3.25rem) / 1.1 var(--font-heading);
  --h2: 600 clamp(1.75rem, 1.5vw + 1rem, 2.5rem) / 1.15 var(--font-heading);
  --h3: 600 clamp(1.375rem, .75vw + 1rem, 1.75rem) / 1.25 var(--font-heading);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;

  /* Spacing scale — 4px base */
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 4rem;     /*  64 */
  --space-9: 6rem;     /*  96 */
  --space-10: 8rem;    /* 128 */

  --radius-xs: 2px;
  --radius-sm: 4px;    /* all buttons */
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px; /* chips + avatars only */

  /* Oxford-tinted shadows — never the browser-default grey */
  --shadow-xs: 0 1px 2px rgba(10, 17, 55, 0.06);
  --shadow-sm: 0 2px 6px -1px rgba(10, 17, 55, 0.08), 0 1px 2px 0 rgba(10, 17, 55, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(10, 17, 55, 0.14), 0 2px 4px 0 rgba(10, 17, 55, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(10, 17, 55, 0.22), 0 4px 8px 0 rgba(10, 17, 55, 0.06);

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* Status colors (stable across themes) — describe the AUDITED site's signals,
     not Joram's brand, so they deliberately don't shift with the palette above. */
  --status-pass: #16a34a;
  --status-pass-bg: #16a34a1a;
  --status-warn: #d97706;
  --status-warn-bg: #d977061a;
  --status-fail: #dc2626;
  --status-fail-bg: #dc26261a;
  --status-info: #6366f1;
  --status-info-bg: #6366f11a;

  --grade-a: #16a34a;
  --grade-b: #65a30d;
  --grade-c: #d97706;
  --grade-d: #ea580c;
  --grade-f: #dc2626;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("https://joram.eu/fonts/CormorantGaramond-VariableFont_wght.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("https://joram.eu/fonts/CormorantGaramond-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("https://joram.eu/fonts/Nunito-VariableFont_wght.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("https://joram.eu/fonts/Nunito-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* Light theme (default) */
:root,
:root[data-theme="light"] {
  --bg: var(--color-baby-powder);
  --bg-elevated: #ffffff;
  --bg-subtle: #eef0ea;
  --border: #0a113722;
  --border-strong: #0a113755;
  --text: var(--color-oxford-blue);
  --text-muted: #0a1137b3;
  --text-faint: #0a113780;
  --code-bg: #eef0ea;

  --button-bg: var(--color-oxford-blue);
  --button-fg: var(--color-baby-powder);
  --accent: var(--color-madder);
  --accent-hover: #8a0e27;
  --cta-bg: var(--color-madder);
  --cta-fg: var(--color-baby-powder);
  --hover-brightness: 0.92; /* darken on hover in light mode */
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--color-ink-black);
    --bg-elevated: #15152a;
    --bg-subtle: #1c1c33;
    --border: #aca6bb2a;
    --border-strong: #aca6bb66;
    --text: var(--color-baby-powder);
    --text-muted: #c7c3d4;
    --text-faint: var(--color-rose-quartz);
    --code-bg: #1c1c33;

    --button-bg: var(--color-rose-quartz);
    --button-fg: var(--color-oxford-blue);
    --accent: var(--color-madder-dark);
    --accent-hover: #f5b7c1;
    --cta-bg: var(--color-madder-dark);
    --cta-fg: var(--color-ink-black);
    --hover-brightness: 1.1; /* lighten on hover in dark mode */
  }
}

:root[data-theme="dark"] {
  --bg: var(--color-ink-black);
  --bg-elevated: #15152a;
  --bg-subtle: #1c1c33;
  --border: #aca6bb2a;
  --border-strong: #aca6bb66;
  --text: var(--color-baby-powder);
  --text-muted: #c7c3d4;
  --text-faint: var(--color-rose-quartz);
  --code-bg: #1c1c33;

  --button-bg: var(--color-rose-quartz);
  --button-fg: var(--color-oxford-blue);
  --accent: var(--color-madder-dark);
  --accent-hover: #f5b7c1;
  --cta-bg: var(--color-madder-dark);
  --cta-fg: var(--color-ink-black);
  --hover-brightness: 1.1; /* lighten on hover in dark mode */
}