/* Brick-n-MortarAI design tokens.
   Consolidated from the Claude Design system export (_source/claude-design-export/_ds).
   Values marked "a11y" were adjusted to meet WCAG 2.1 AA contrast. */

:root {
  /* Light ground */
  --white: #FFFFFF;
  --off-white: #FAFAFA;
  --paper: #F4F4F6;

  /* Cinematic ground */
  --ink-900: #050609;
  --ink-700: #111318;
  --ink-600: #181B22;

  /* Neutrals */
  --grey-100: #F1F1F3;
  --grey-200: #E4E4E8;
  --grey-300: #C9CAD1;
  --grey-500: #6E7079;   /* 4.9:1 on white: smallest muted text allowed */
  --grey-600: #4A4C54;
  --grey-control: #7E808A; /* a11y: 3.9:1 on white, for field/chip/control borders (1.4.11) */

  /* Brand accent */
  --purple: #A13BFF;
  --violet: #7B4DFF;
  --blue: #35B6FF;
  --purple-dim: #8A2FE0;

  /* The original gradient. Passes on dark grounds only. */
  --gradient-brand: linear-gradient(90deg, #A13BFF 0%, #7B4DFF 50%, #35B6FF 100%);
  /* a11y: deeper stops for gradient text on white (every stop >= 5:1) */
  --gradient-brand-light: linear-gradient(90deg, #8A2FE0 0%, #6B3EE6 50%, #1A73B8 100%);
  /* a11y: gradient fill behind white button/badge text (every stop >= 5:1) */
  --gradient-cta: linear-gradient(90deg, #8A2FE0 0%, #6B3EE6 50%, #1A73B8 100%);
  --gradient-cta-hover: linear-gradient(90deg, #7424C4 0%, #5A2FD0 50%, #155F99 100%);

  --scrim-bottom: linear-gradient(180deg, rgba(5,6,9,0) 0%, rgba(5,6,9,.35) 48%, rgba(5,6,9,.86) 100%);

  /* Semantic */
  --text-primary: var(--ink-900);
  --text-secondary: var(--grey-600);
  --text-muted: var(--grey-500);
  --border-subtle: var(--grey-200);
  --text-inverse: var(--white);
  --text-inverse-secondary: rgba(255,255,255,.72);
  --text-inverse-muted: rgba(255,255,255,.6);
  --border-inverse: rgba(255,255,255,.14);
  --border-inverse-strong: rgba(255,255,255,.4);
  --accent-text: var(--purple-dim);
  --accent-surface: rgba(161,59,255,.08);
  --focus-ring: var(--violet);  /* a11y: solid, was 55% alpha */
  --error: #C62F35;             /* a11y: 5.2:1 on white */
  --success: #137A52;

  /* Type */
  --font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;

  /* Radii */
  --radius-xs: 6px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-media: 20px;
  --radius-modal: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-md: 0 8px 24px rgba(5,6,9,.08);
  --shadow-media: 0 30px 80px rgba(5,6,9,.18);
  --glow-accent: 0 0 0 1px rgba(161,59,255,.4), 0 18px 48px rgba(53,182,255,.16);

  /* Motion (Emil Kowalski's design-engineering rules: strong custom curves,
     UI under 300ms, exits faster than entrances) */
  --ease-out: cubic-bezier(.23,1,.32,1);       /* entering, exiting, press feedback */
  --ease-in-out: cubic-bezier(.77,0,.175,1);   /* things moving on screen */
  --ease-drawer: cubic-bezier(.32,.72,0,1);    /* iOS-style drawer */
  --dur-press: 160ms;     /* button press */
  --dur-fast: 160ms;      /* colour and hover changes */
  --dur-base: 200ms;      /* small UI: chevrons, menus, disclosures */
  --dur-hover: 300ms;     /* decorative hover: card lift, image zoom */
  --dur-drawer-in: 360ms;
  --dur-drawer-out: 200ms;
  --dur-reveal: 600ms;    /* scroll reveals (marketing, seen once) */
  --press-scale: .97;
  --stagger: 60ms;

  /* Reading measure: 65-75 characters per line */
  --measure: 60ch; /* the ch unit is a "0", wider than an average letter: 60ch lands ~72 characters in Manrope */

  /* Layout: mobile first, stepped up in main.css */
  --container-max: 1440px;
  --gutter: 20px;
  --section-y: 72px;
  --header-h: 68px;
}