/* ==========================================================================
   Cloudstore Central — Design tokens
   Concept: "Secure Signal" — near-black navy ink, restrained magenta/violet signal accent,
   fine hairline borders, structured grids. Enterprise control-plane character.
   All tokens are CSS custom properties so a licensed font or rebrand can be
   dropped in later without touching component CSS.
   ========================================================================== */

:root {
  /* ----- Colours ----- */
  --colour-ink: #0a0e17;          /* ink black */
  --colour-navy: #05060c;         /* near-black navy */
  --colour-blue-dark: #14294a;    /* dark blue */
  --colour-cloud-white: #ffffff;  /* cloud white */
  --colour-warm-white: #f7f8fa;   /* warm white */
  --colour-neutral-light: #eceef2;/* light neutral */
  --colour-neutral-mid: #c8cdd6;  /* mid neutral */
  --colour-neutral-dark: #5c6675; /* dark neutral */
  --colour-muted: #626b77;        /* muted text — ≥4.5:1 on white, warm-white and light-neutral backgrounds */
  --colour-enterprise-blue: #0068eb; /* nearest AA-compliant shade of the brand blue: ≥4.5:1 on white and warm-white */
  --colour-cyan: #ff2cb2;         /* magenta accent */
  --colour-teal: #6f2cff;         /* violet accent */
  --colour-success: #15803d;
  --colour-warning: #b45309;
  --colour-error: #b91c1c;
  --colour-focus-ring: #f21ea6; /* slightly darker magenta: ≥3:1 non-text contrast on all light surfaces incl. --bg-muted */

  /* ----- Semantic colour roles ----- */
  --bg-page: var(--colour-cloud-white);
  --bg-subtle: var(--colour-warm-white);
  --bg-muted: var(--colour-neutral-light);
  --bg-inverse: var(--colour-navy);
  --bg-inverse-deep: var(--colour-ink);
  --text-primary: var(--colour-ink);
  --text-secondary: var(--colour-neutral-dark);
  --text-muted: var(--colour-muted);
  --text-on-inverse: #e8ecf3;
  --text-on-inverse-muted: #9aa6ba;
  --link: var(--colour-enterprise-blue);
  --link-hover: var(--colour-blue-dark);
  --accent: var(--colour-cyan);
  --accent-deep: var(--colour-teal);

  /* ----- Typography ----- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas",
    "Liberation Mono", monospace;
  /* Variable-font hook: set --font-brand to a licensed self-hosted family later. */
  --font-brand: var(--font-sans);

  --fs-display: clamp(2.6rem, 1.6rem + 4vw, 4.5rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;
  --fs-label: 0.85rem;
  --fs-nav: 0.95rem;
  --fs-data: clamp(1.8rem, 1.3rem + 2vw, 2.75rem);

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.01em;

  /* ----- Spacing scale (4px base) ----- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* ----- Layout ----- */
  --width-narrow: 46rem;
  --width-standard: 72rem;
  --width-wide: 86rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --section-spacing: clamp(3rem, 2rem + 4vw, 6rem);
  --grid-gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);

  /* ----- Borders & radii ----- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--colour-neutral-light);
  --border-default: 1px solid var(--colour-neutral-mid);
  --border-strong: 1px solid var(--colour-neutral-dark);
  --border-colour: var(--colour-neutral-mid);
  --border-colour-subtle: var(--colour-neutral-light);

  /* ----- Shadows (subtle depth only) ----- */
  --shadow-sm: 0 1px 2px rgba(10, 14, 23, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 14, 23, 0.08);
  --shadow-lg: 0 12px 40px rgba(10, 14, 23, 0.12);

  /* ----- Motion ----- */
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 360ms;
  --easing: cubic-bezier(0.2, 0, 0.1, 1);

  /* ----- Chrome ----- */
  --header-height: 4.5rem;
  --focus-outline: 3px solid var(--colour-focus-ring);
  --focus-offset: 2px;
  --max-touch: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}