/* =========================================================================
   RequestMe — Design Tokens
   Palette derived from the RequestMe mark (electric blue "R", arrow motif).
   Light mode is the source of truth; dark mode re-derives every token
   rather than inverting, per the product's own design direction.
   ========================================================================= */

:root {
  /* ---- Brand blue (from the logo) --------------------------------- */
  --brand-50:  #eef4ff;
  --brand-100: #dbe7ff;
  --brand-200: #b7d0ff;
  --brand-300: #85aeff;
  --brand-400: #5484ff;
  --brand-500: #2a5dff;
  --brand-600: #0b52ff;  /* primary — sampled from the mark */
  --brand-700: #0a40cc;
  --brand-800: #0c359e;
  --brand-900: #0e2f7d;
  --brand-950: #0a1c4a;

  /* ---- Brass — marketing-only signature accent, used sparingly ---- */
  --brass-100: #f6eedf;
  --brass-400: #cf9c4f;
  --brass-600: #a9762a;
  --brass-800: #6f4c19;

  /* ---- Neutrals (cool grey ramp) ------------------------------------ */
  --grey-0:   #ffffff;
  --grey-25:  #fcfcfd;
  --grey-50:  #f8f9fb;
  --grey-100: #f1f3f7;
  --grey-200: #e4e7ee;
  --grey-300: #cdd2dd;
  --grey-400: #9aa2b1;
  --grey-500: #6b7280;
  --grey-600: #545c6b;
  --grey-700: #3d4552;
  --grey-800: #262c37;
  --grey-900: #171b23;
  --grey-950: #0b0e14;

  /* ---- Semantic status — colour is always paired with a word ------- */
  --status-waiting-fg: #b45309;
  --status-waiting-bg: #fef3e2;
  --status-approved-fg: #15803d;
  --status-approved-bg: #e9f7ee;
  --status-rejected-fg: #b91c1c;
  --status-rejected-bg: #fdecec;
  --status-returned-fg: #1d4ed8;
  --status-returned-bg: #eaf0fe;
  --status-draft-fg: #4b5563;
  --status-draft-bg: #f1f3f7;

  /* ---- Semantic roles (light mode) ---------------------------------- */
  --bg-page: var(--grey-0);
  --bg-subtle: var(--grey-25);
  --bg-fill: var(--grey-50);
  --bg-hover: var(--grey-100);
  --bg-inverse: var(--grey-950);
  --bg-inverse-subtle: #10151f;

  --border-hairline: var(--grey-200);
  --border-strong: var(--grey-300);
  --border-inverse: #2a3140;

  --text-primary: var(--grey-900);
  --text-secondary: var(--grey-500);
  --text-tertiary: var(--grey-400);
  --text-inverse: var(--grey-0);
  --text-inverse-secondary: #a7afc0;
  --text-on-brand: #ffffff;

  --action-primary: var(--brand-600);
  --action-primary-hover: var(--brand-700);
  --action-primary-tint: var(--brand-50);
  --action-focus: var(--brand-500);

  --card-bg: var(--grey-0);
  --card-border: var(--grey-200);

  /* ---- Type ---------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Scale (marketing) --------------------------------------------- */
  --text-display-xl: clamp(2.75rem, 2rem + 3.2vw, 4.25rem);
  --text-display-l:  clamp(2.25rem, 1.7rem + 2.4vw, 3.25rem);
  --text-display-m:  clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --text-heading-l:  1.5rem;
  --text-heading-m:  1.25rem;
  --text-body-l:     1.125rem;
  --text-body:       1rem;
  --text-body-s:     0.875rem;
  --text-caption:    0.75rem;

  /* ---- Spacing (4px rhythm) ------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Elevation — modals/popovers only, per product design rules ------ */
  --shadow-elevated: 0 8px 24px rgba(11, 14, 20, 0.08), 0 2px 6px rgba(11, 14, 20, 0.05);
  --shadow-soft: 0 1px 2px rgba(11, 14, 20, 0.04);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-marketing: 500ms;

  /* ---- Layout ------------------------------------------------------------ */
  --content-max: 1280px;
  --content-max-wide: 1440px;
  --nav-height: 72px;
}

/* ---- Dark mode: system preference ------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: var(--grey-950);
    --bg-subtle: #0f131c;
    --bg-fill: #141924;
    --bg-hover: #1a2130;
    --bg-inverse: var(--grey-0);
    --bg-inverse-subtle: var(--grey-50);

    --border-hairline: #232a38;
    --border-strong: #323b4d;
    --border-inverse: var(--grey-200);

    --text-primary: #f3f5f9;
    --text-secondary: #a7afc0;
    --text-tertiary: #6f7788;
    --text-inverse: var(--grey-900);
    --text-inverse-secondary: var(--grey-500);
    --text-on-brand: #ffffff;

    --action-primary: #4c7bee;
    --action-primary-hover: #6f95f2;
    --action-primary-tint: #16223f;
    --action-focus: #6f95f2;

    --card-bg: #141924;
    --card-border: #232a38;

    --status-waiting-fg: #f5a742;
    --status-waiting-bg: #2c2110;
    --status-approved-fg: #4ade80;
    --status-approved-bg: #10261a;
    --status-rejected-fg: #f87171;
    --status-rejected-bg: #2a1414;
    --status-returned-fg: #7d9dff;
    --status-returned-bg: #131e3a;
    --status-draft-fg: #a7afc0;
    --status-draft-bg: #1a2130;

    --shadow-elevated: 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* ---- Dark mode: explicit toggle wins in both directions --------------- */
:root[data-theme="dark"] {
  --bg-page: var(--grey-950);
  --bg-subtle: #0f131c;
  --bg-fill: #141924;
  --bg-hover: #1a2130;
  --bg-inverse: var(--grey-0);
  --bg-inverse-subtle: var(--grey-50);

  --border-hairline: #232a38;
  --border-strong: #323b4d;
  --border-inverse: var(--grey-200);

  --text-primary: #f3f5f9;
  --text-secondary: #a7afc0;
  --text-tertiary: #6f7788;
  --text-inverse: var(--grey-900);
  --text-inverse-secondary: var(--grey-500);
  --text-on-brand: #ffffff;

  --action-primary: #4c7bee;
  --action-primary-hover: #6f95f2;
  --action-primary-tint: #16223f;
  --action-focus: #6f95f2;

  --card-bg: #141924;
  --card-border: #232a38;

  --status-waiting-fg: #f5a742;
  --status-waiting-bg: #2c2110;
  --status-approved-fg: #4ade80;
  --status-approved-bg: #10261a;
  --status-rejected-fg: #f87171;
  --status-rejected-bg: #2a1414;
  --status-returned-fg: #7d9dff;
  --status-returned-bg: #131e3a;
  --status-draft-fg: #a7afc0;
  --status-draft-bg: #1a2130;

  --shadow-elevated: 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3);
}