/*
 * BitHive design tokens: the one source for both the website and the Reporting Desk
 * application (design brief v1, section 3).
 *
 * This file is canonical here. It is published as-is at https://bithive-it.com/tokens.css,
 * and bithive-it/bird carries a copy at web/static/tokens.css whose CI compares itself
 * with that address, so neither repository needs a key to the other. Change it here
 * first; the copy in the application follows once this site is deployed.
 *
 * Only custom properties belong in this file: no selectors beyond :root and the dark
 * scheme, no component rules. Colours come from the BitHive logo (ink and honey), with
 * the greys, link blue and status colours the brief adds. Every text colour meets WCAG
 * 2.1 AA against the surfaces it is used on, in both schemes.
 */

/* ==========================================================================
 * The palette. Approved 21 September 2026 after a scoped review on the pricing page
 * (0 contrast violations across eight page renderings, three engines, five widths).
 *
 * Two rules the components follow:
 *   - a component names only a --color-* token, never a raw hex value and never a ramp
 *     step, so the ramp can change without touching a component;
 *   - #F2A900 is the brand mark and nothing else. It is the logo's yellow, it does not
 *     meet 4.5:1 against white at text size, and a button in it would be a button nobody
 *     with low vision can read. It exists here as --color-brand-mark, and the logo
 *     component is the only thing allowed to use it (scripts/check-colours.mjs).
 * ==========================================================================
 */
:root {
  color-scheme: light dark;

  /* Action */
  --blue-900: #10275a;
  --blue-800: #16377e;
  --blue-700: #1b48a5;
  --blue-600: #2563c9;
  --blue-200: #c2d4f0;
  --blue-50: #eff4fc;

  /* Destructive */
  --red-700: #b4231d;
  --red-800: #8e1a16;
  --red-50: #fdf0ef;

  /* Status */
  --green-700: #0f7040;
  --amber-700: #b54708;

  /* Neutrals */
  --ink-900: #0b1220;
  --ink-700: #26324a;
  --ink-500: #55627d;
  --ink-400: #7a869f;
  --ink-200: #d7dce6;
  --ink-100: #ebeef4;
  --ink-50: #f6f8fb;

  /* The semantic tokens: the only names a component may use. */
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-surface: #ffffff;
  --color-surface-tint: var(--ink-50);
  --color-callout: var(--blue-50);
  --color-border: var(--ink-200);
  --color-action: var(--blue-700);
  --color-action-hover: var(--blue-800);
  --color-action-active: var(--blue-900);
  --color-action-text: #ffffff;
  --color-link: var(--blue-700);
  --color-focus: var(--blue-600);
  --color-danger: var(--red-700);
  --color-danger-hover: var(--red-800);
  --color-danger-surface: var(--red-50);
  --color-success: var(--green-700);
  --color-warning: var(--amber-700);
  --color-brand-mark: #f2a900;

  /*
   * The old names, mapped onto the new ones, so a page carrying the attribute is fully
   * dressed in v2 while the components are still written against the old ramp. They go
   * when the tokens move to :root.
   */
  --paper: var(--color-surface);
  --surface: var(--color-surface-tint);
  --surface-strong: var(--ink-100);
  --ink: var(--color-text);
  --ink-deep: var(--ink-900);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--ink-400);
  --on-ink: #ffffff;
  --on-ink-muted: var(--ink-200);
  --on-ink-line: var(--ink-700);
  --ink-button: var(--color-action);
  --ink-button-hover: var(--color-action-hover);
  --ink-button-text: var(--color-action-text);
  --accent: var(--color-action);
  --accent-strong: var(--color-action-hover);
  --accent-ink: var(--color-action-text);
  --accent-soft: var(--color-callout);
  --link: var(--color-link);
  --link-hover: var(--color-action-hover);
  --link-on-ink: var(--blue-200);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-surface);
  --warning: var(--color-warning);
  --warning-soft: #fdf2e3;
  --ok: var(--color-success);
  --ok-soft: #e8f6ec;
  --focus: 2px solid var(--color-focus);
  --focus-offset: 2px;
  /* Type */
  --font-text: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Liberation Mono', Menlo, monospace;
  --step--1: 0.875rem; /* 14 */
  --step-0: 1rem; /* 16 */
  --step-1: 1.125rem; /* 18 */
  --step-2: 1.25rem; /* 20 */
  --step-3: 1.5rem; /* 24 */
  --step-4: 2rem; /* 32 */
  --step-5: clamp(2rem, 4vw, 2.75rem); /* 44 */
  --step-6: clamp(2.5rem, 6vw, 3.5rem); /* 56 */
  --leading-body: 1.6;
  --leading-tight: 1.15;

  /* Space: 8 px unit */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container: 75rem; /* 1200 px */
  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --section-space: clamp(3rem, 7vw, 5.5rem);
  --grid-gap: clamp(1rem, 3vw, 2rem);

  /* Shape and depth */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --shadow-1: 0 1px 2px rgb(19 33 46 / 0.06), 0 1px 3px rgb(19 33 46 / 0.08);
  --shadow-2: 0 8px 24px rgb(19 33 46 / 0.1);
  --focus: 2px solid var(--link);
  --focus-offset: 2px;

}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: var(--ink-100);
    --color-text-muted: var(--ink-400);
    --color-surface: var(--ink-900);
    --color-surface-tint: #111a2c;
    /* Dark tints are darker than a first guess: muted text (--ink-400) sits on them,
       and 4.5:1 is the rule, not a target. Measured in scripts/contrast-report.mjs. */
    --color-callout: #111a2e;
    --color-border: var(--ink-700);
    --color-action: #6f9bef;
    --color-action-hover: #9dbcff;
    --color-action-active: var(--blue-200);
    --color-action-text: var(--ink-900);
    --color-link: #9dbcff;
    --color-focus: #9dbcff;
    --color-danger: #f4a9a5;
    --color-danger-hover: #f8c6c3;
    --color-danger-surface: #2a1516;
    --color-success: #74d3a3;
    --color-warning: #f0b06b;

    --paper: var(--color-surface);
    --surface: var(--color-surface-tint);
    --surface-strong: #1b2740;
    --ink: var(--color-text);
    --ink-deep: #060c17;
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --line: var(--color-border);
    --line-strong: var(--ink-500);
    --on-ink: var(--ink-100);
    --on-ink-muted: var(--ink-400);
    --on-ink-line: var(--ink-700);
    --ink-button: var(--color-action);
    --ink-button-hover: var(--color-action-hover);
    --ink-button-text: var(--color-action-text);
    --accent: var(--color-action);
    --accent-strong: var(--color-action-hover);
    --accent-ink: var(--color-action-text);
    --accent-soft: var(--color-callout);
    --link: var(--color-link);
    --link-hover: var(--color-action-hover);
    --link-on-ink: var(--blue-200);
    --danger: var(--color-danger);
    --danger-soft: var(--color-danger-surface);
    --ok: var(--color-success);
    --ok-soft: #0d1d13;
    --warning: var(--color-warning);
    --warning-soft: #1d1709;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-2: 0 8px 24px rgb(0 0 0 / 0.55);
  }
}