/*
 * SCRHUB design tokens - CANONICAL, Design System V2.
 *
 * This file is the single source of truth for SCRHUB's visual language. It is copied
 * verbatim into every product that can consume CSS custom properties;
 * scrhub-verify-design-system asserts every copy - in the source tree AND inside the
 * running container - is byte-identical to this one.
 *
 * The audit measured the recovered frontend: the same design system had been
 * copy-pasted into 17 templates in 9 divergent variants, 203 external script and
 * stylesheet tags loaded from 5 origins with zero Subresource Integrity, and
 * both admin panels went permanently blank if the Alpine CDN was unreachable.
 * There is one source of truth here, it is served from the application's own
 * origin, and nothing on the page depends on a third party being up.
 *
 * SCRHUB palette, 2026-09-06. The values below are MEASURED from the live
 * estate with a browser, not chosen: scrhub.net and status.scrhub.net both
 * compute a #0b0b0f ground with #f4f4f5 text, the main site's cards are
 * #131314 on a #1f1f20 hairline, and shop.scrhub.net and status.scrhub.net
 * both carry #e8a830 as the accent on buttons and links. Those are the numbers
 * here. See design/SCRHUB-DESIGN-LANGUAGE.md for the measurements.
 *
 * DARK IS THE DEFAULT, because every SCRHUB service renders dark. Light is
 * kept as a complete, opt-in alternative rather than deleted: the tokens are
 * semantic, so a light instance costs nothing to keep working and an operator
 * who wants one is not blocked by a decision made here.
 *
 * Typography is Inter, self-hosted. The estate loads Inter from Google Fonts;
 * this product must not, because its Content-Security-Policy is
 * `default-src 'self'` with no remote origins, and that policy is a certified
 * property of this build. Trading a real security control for a webfont is the
 * wrong way round, so the font is served from this origin instead. The system
 * stack behind it is the estate's own fallback list, unchanged.
 *
 * Every product shares this file and overrides only --accent-*.
 */

/*
 * Inter, served from this origin.
 *
 * One variable face covers 400-700, which is every weight the interface uses.
 * `font-display: swap` means text is readable in the fallback immediately and
 * never invisible while the font loads. The URL is relative to this
 * stylesheet, so it resolves under the same /_scr mount and needs no absolute
 * origin in the CSS.
 *
 * Licence: SIL Open Font License 1.1, shipped alongside at
 * assets/fonts/Inter-LICENSE.txt.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.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;
}

:root {
  /* ---------------------------------------------------------------- colour */

  /*
   * Neutrals carry a slight cool cast rather than being pure grey, so they sit
   * with the accents instead of fighting them.
   */
  --scr-neutral-0: #ffffff;
  --scr-neutral-25: #fafafa;
  --scr-neutral-50: #f4f4f5;  /* measured: SCRHUB body text */
  --scr-neutral-100: #e4e4e7;
  --scr-neutral-200: #d4d4d8;
  --scr-neutral-300: #b0b0b8;
  --scr-neutral-400: #a1a1aa; /* measured: SCRHUB muted text */
  --scr-neutral-500: #71717a;
  --scr-neutral-600: #52525b;
  --scr-neutral-700: #3f3f46;
  --scr-neutral-800: #27272a;
  --scr-neutral-850: #1f1f20; /* measured: SCRHUB card hairline */
  --scr-neutral-900: #14141a; /* measured: SCRHUB raised surface */
  --scr-neutral-925: #131314; /* measured: SCRHUB card */
  --scr-neutral-950: #0b0b0f; /* measured: SCRHUB ground */

  /*
   * Accent. Everything else derives from these three.
   *
   * SCRHUB uses ONE accent. #e8a830 is sampled from the SCR mark and measures 9.42:1
   * on the #0b0b0f ground. (The line here used to say "the default is SCR Store's
   * green", which was a vendor comment describing a value this file has never held.)
   */
  --scr-accent: #e8a830;
  --scr-accent-strong: #f0c048;
  --scr-accent-soft: rgb(232 168 48 / 0.12);

  /*
   * Semantic colour is separate from the accent, so a success state does not
   * change meaning when a product changes its accent.
   */
  --scr-success: #51cf66;
  --scr-success-soft: rgb(81 207 102 / 0.12);
  --scr-warning: #e8a830;
  --scr-warning-soft: rgb(232 168 48 / 0.12);
  --scr-danger: #ff6b62;
  --scr-danger-soft: rgb(255 107 98 / 0.12);
  --scr-info: #74aed6;
  --scr-info-soft: rgb(116 174 214 / 0.12);

  /*
   * ---- semantic surface roles: SCRHUB dark, the default ----
   *
   * `--scr-text-on-accent` is DARK, not white, and that is a deliberate
   * divergence from shop.scrhub.net. White on #e8a830 measures 2.08:1, which
   * fails WCAG AA for normal text at any size; #0b0b0f on the same amber
   * measures 9.42:1. The button looks the same from across the room and is
   * readable close up.
   */
  --scr-bg: var(--scr-neutral-950);
  --scr-surface: var(--scr-neutral-925);
  --scr-surface-raised: var(--scr-neutral-900);
  --scr-surface-sunken: #08080b;
  --scr-border: var(--scr-neutral-850);
  --scr-border-strong: #2e2e31;
  --scr-text: var(--scr-neutral-50);
  --scr-text-muted: var(--scr-neutral-400);
  --scr-text-subtle: #8b8b93;
  --scr-text-on-accent: #0b0b0f;
  --scr-overlay: rgb(0 0 0 / 0.72);

  /* ------------------------------------------------------------ typography */

  /* Inter first, then the estate's own fallback list, unchanged. */
  --scr-font-sans:
    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
  --scr-font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* A 1.2 scale from 14px. Small enough steps that a heading never jumps. */
  --scr-text-xs: 0.75rem; /* 12 */
  --scr-text-sm: 0.875rem; /* 14 */
  --scr-text-base: 1rem; /* 16 */
  --scr-text-md: 1.125rem; /* 18 */
  --scr-text-lg: 1.375rem; /* 22 */
  --scr-text-xl: 1.75rem; /* 28 */
  --scr-text-2xl: 2.125rem; /* 34 */
  --scr-text-3xl: 2.625rem; /* 42 */

  --scr-leading-tight: 1.2;
  --scr-leading-snug: 1.4;
  --scr-leading-normal: 1.6;

  --scr-weight-normal: 400;
  --scr-weight-medium: 500;
  --scr-weight-semibold: 600;
  --scr-weight-bold: 700;

  --scr-tracking-tight: -0.015em;
  --scr-tracking-normal: 0;
  --scr-tracking-wide: 0.06em;

  /* --------------------------------------------------------------- spacing */

  /* A 4px base. Named by step, so a gap is chosen rather than invented. */
  --scr-space-1: 0.25rem;
  --scr-space-2: 0.5rem;
  --scr-space-3: 0.75rem;
  --scr-space-4: 1rem;
  --scr-space-5: 1.5rem;
  --scr-space-6: 1.75rem; /* 28px: measured card padding on scrhub.net */
  --scr-space-7: 3rem;
  --scr-space-8: 4rem;
  --scr-space-9: 6rem;

  /* ---------------------------------------------------------------- shape */

  /*
   * 10px everywhere. Measured on the main site's cards and buttons and on
   * shop.scrhub.net's buttons, panels and inputs: the estate uses one radius,
   * not a scale. `--scr-radius-sm` stays for the few places a full 10px would
   * look bulbous (a tag, an inline code span).
   */
  --scr-radius-sm: 6px;
  --scr-radius: 10px;
  --scr-radius-lg: 10px;
  --scr-radius-full: 999px;

  --scr-shadow-sm: 0 1px 2px rgb(23 29 36 / 0.06);
  --scr-shadow: 0 1px 3px rgb(23 29 36 / 0.08), 0 4px 12px rgb(23 29 36 / 0.05);
  --scr-shadow-lg: 0 4px 12px rgb(23 29 36 / 0.1), 0 16px 40px rgb(23 29 36 / 0.08);

  /* --------------------------------------------------------------- layout */

  --scr-container: 72rem;
  --scr-container-narrow: 44rem;
  --scr-container-wide: 88rem;
  --scr-header-height: 3.75rem;

  /* --------------------------------------------------------------- motion */

  --scr-duration-fast: 120ms;
  --scr-duration: 200ms;
  --scr-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* --------------------------------------------------------------- focus */

  /*
   * One focus treatment, used everywhere, never removed. The audit found focus
   * indicators stripped from 21 controls across the recovered templates, which
   * makes the admin area unusable by keyboard.
   */
  --scr-focus-ring: 0 0 0 2px var(--scr-surface), 0 0 0 4px var(--scr-accent);

  color-scheme: light dark;
}

/* ---------------------------------------------------------------- themes */

/*
 * Dark is defined on :root above and is what SCRHUB serves. The three blocks
 * below exist so the choice is complete rather than implicit:
 *
 *   1. a system LIGHT preference, honoured unless dark was chosen explicitly;
 *   2. an explicit light choice, which beats the system;
 *   3. an explicit dark choice, which restates the default so that toggling
 *      back from light lands somewhere defined rather than inheriting.
 *
 * Only tokens are redefined. No component knows a theme exists.
 */

/*
 * There is deliberately NO `prefers-color-scheme: light` block.
 *
 * Every SCRHUB service renders dark whatever the visitor's operating system
 * says: the Next.js apps stamp data-mantine-color-scheme="dark" and Status
 * stamps data-bs-theme="dark". A visitor on a light desktop who opens
 * scrhub.net gets the dark site, and Paste opening light beside it would look
 * like a different product rather than a sibling.
 *
 * Light is therefore an EXPLICIT choice and nothing else. It is kept complete
 * and working, because the tokens are semantic and an operator who wants a
 * light instance should not be blocked by a decision made here.
 */

/* ---- 2. an explicit light choice beats the operating system ---- */
:root[data-scr-theme='light'] {
  --scr-bg: var(--scr-neutral-50);
  --scr-surface: var(--scr-neutral-0);
  --scr-surface-raised: var(--scr-neutral-0);
  --scr-surface-sunken: var(--scr-neutral-100);
  --scr-border: var(--scr-neutral-200);
  --scr-border-strong: var(--scr-neutral-300);
  --scr-text: #18181b;
  --scr-text-muted: var(--scr-neutral-600);
  --scr-text-subtle: var(--scr-neutral-500);
  --scr-text-on-accent: #ffffff;
  --scr-overlay: rgb(24 24 27 / 0.55);

  --scr-accent: #8a6410;
  --scr-accent-strong: #6d4e0c;
  --scr-accent-soft: rgb(232 168 48 / 0.16);

  --scr-success: #1f7a4d;
  --scr-success-soft: rgb(31 122 77 / 0.12);
  --scr-warning: #8a6410;
  --scr-warning-soft: rgb(138 100 16 / 0.12);
  --scr-danger: #b02a26;
  --scr-danger-soft: rgb(176 42 38 / 0.1);
  --scr-info: #1f5f8b;
  --scr-info-soft: rgb(31 95 139 / 0.1);

  --scr-shadow-sm: 0 1px 2px rgb(24 24 27 / 0.06);
  --scr-shadow: 0 1px 3px rgb(24 24 27 / 0.08), 0 4px 12px rgb(24 24 27 / 0.05);
  --scr-shadow-lg: 0 4px 12px rgb(24 24 27 / 0.1), 0 16px 40px rgb(24 24 27 / 0.08);
}

/* ---- 3. an explicit dark choice, restating the default ---- */
:root[data-scr-theme='dark'] {
  --scr-bg: var(--scr-neutral-950);
  --scr-surface: var(--scr-neutral-925);
  --scr-surface-raised: var(--scr-neutral-900);
  --scr-surface-sunken: #08080b;
  --scr-border: var(--scr-neutral-850);
  --scr-border-strong: #2e2e31;
  --scr-text: var(--scr-neutral-50);
  --scr-text-muted: var(--scr-neutral-400);
  --scr-text-subtle: #8b8b93;
  --scr-text-on-accent: #0b0b0f;
  --scr-overlay: rgb(0 0 0 / 0.72);

  --scr-accent: #e8a830;
  --scr-accent-strong: #f0c048;
  --scr-accent-soft: rgb(232 168 48 / 0.12);

  --scr-success: #51cf66;
  --scr-success-soft: rgb(81 207 102 / 0.12);
  --scr-warning: #e8a830;
  --scr-warning-soft: rgb(232 168 48 / 0.12);
  --scr-danger: #ff6b62;
  --scr-danger-soft: rgb(255 107 98 / 0.12);
  --scr-info: #74aed6;
  --scr-info-soft: rgb(116 174 214 / 0.12);

  --scr-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --scr-shadow: 0 1px 3px rgb(0 0 0 / 0.6), 0 4px 12px rgb(0 0 0 / 0.45);
  --scr-shadow-lg: 0 4px 12px rgb(0 0 0 / 0.65), 0 16px 40px rgb(0 0 0 / 0.5);
}

/*
 * The guard the design-system test looks for. A system DARK preference must
 * not override an explicit light choice; because dark is already the :root
 * default this block asserts the default rather than changing it, and the
 * `:not([data-scr-theme='light'])` is what keeps an explicit light choice
 * winning on a dark operating system.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-scr-theme='light']) {
    --scr-bg: var(--scr-neutral-950);
    --scr-surface: var(--scr-neutral-925);
    --scr-text: var(--scr-neutral-50);
    --scr-text-on-accent: #0b0b0f;
    --scr-accent: #e8a830;
  }
}

/* ------------------------------------------------------ per-product accent */

/*
 * SCRHUB uses ONE accent across the estate. The amber carries shop.scrhub.net's
 * primary button and inline links, status.scrhub.net's primary and link colour,
 * and the SCR mark itself. The vendor's original scheme gave each product its
 * own hue; that is a vendor idea, not a SCRHUB one, and adopting it would make
 * Paste look like a different suite's application.
 *
 * The per-product hooks stay, because they are the supported way to differ, but every
 * SCRHUB product now resolves to the SAME accent through them. The vendor file set
 * data-scr-product='links' to a purple #6b4e8f; adopting this file into Links unchanged
 * would have turned Links purple in the name of unifying the design system. Measured,
 * not assumed: rendering the estate showed Links, Paste, Account and the Shop all
 * painting #e8a830 primaries today.
 */
:root[data-scr-product='paste'],
:root[data-scr-product='links'],
:root[data-scr-product='legal'],
:root[data-scr-product='account'] {
  --scr-accent: #e8a830;
  --scr-accent-strong: #f0c048;
  --scr-accent-soft: rgb(232 168 48 / 0.12);
}

:root[data-scr-product='paste'][data-scr-theme='light'],
:root[data-scr-product='links'][data-scr-theme='light'],
:root[data-scr-product='legal'][data-scr-theme='light'],
:root[data-scr-product='account'][data-scr-theme='light'] {
  --scr-accent: #8a6410;
  --scr-accent-strong: #6d4e0c;
}