/*
 * Mozee design tokens. The one source of every colour, font, radius, shadow
 * and motion value, for the app and the marketing site. Plain CSS custom
 * properties: no Tailwind, no build step. A static page links this file; the
 * app imports it from src/styles/theme.css, which maps shadcn's variables
 * onto it. design/DESIGN.md explains each token and when to use it.
 *
 * Three layers, all prefixed --mz- so nothing collides with Tailwind's own
 * theme variables:
 *   1. Primitives   raw values with no meaning. Never used by a component.
 *   2. App          --mz-* semantic tokens for the dense app UI. They follow
 *                   the device: light here, dark in the media query below.
 *   3. Marketing    --mz-mk-* tokens for the website, Apple scale, light only.
 *                   They do not flip in dark mode.
 *
 * Contrast is measured, not assumed: src/styles/tokens.test.ts computes every
 * ratio quoted here and fails when one drops under its WCAG 2.2 AA minimum.
 */

:root {
  /* 1. Primitives ---------------------------------------------------------- */

  /* Action Blue, Apple's three blues. */
  --mz-blue-600: #0066cc; /* Action Blue: actions and links on light */
  --mz-blue-500: #0071e3; /* Apple primary-focus: hover and focus on light, the button fill on dark */
  --mz-blue-400: #2997ff; /* Apple primary-on-dark: links and focus on dark */

  /* Tailwind neutral, the shadcn base. */
  --mz-white: #ffffff;
  --mz-neutral-50: #fafafa;
  --mz-neutral-100: #f5f5f5;
  --mz-neutral-200: #e5e5e5;
  --mz-neutral-400: #a1a1a1;
  --mz-neutral-500: #737373;
  --mz-neutral-550: #6e6e6e; /* one step under 500 so muted text clears 4.5:1 on neutral-100 */
  --mz-neutral-800: #262626;
  --mz-neutral-900: #171717;
  --mz-neutral-950: #0a0a0a;
  --mz-apple-grey: #86868b; /* Apple's form-field border, from apple.com */

  /* Status and the Miro Clinic accents (Tailwind palette). */
  --mz-red-600: #e7000b;
  --mz-red-400: #ff6467;
  --mz-teal-700: #00786f;
  --mz-teal-600: #009689;
  --mz-teal-500: #00bba7;
  --mz-rose-600: #ec003f;
  --mz-rose-500: #ff2056;
  --mz-indigo-600: #4f39f6;
  --mz-indigo-500: #615fff;
  --mz-cyan-600: #0092b8;
  --mz-amber-400: #ffb900;
  --mz-sky-300: #8adaff;
  --mz-violet-600: #7f22fe;
  --mz-violet-500: #8e51ff;
  --mz-fuchsia-600: #c026d3;
  --mz-fuchsia-500: #d946ef;
  --mz-orange-600: #ea580c;
  --mz-orange-500: #f97316;

  /* Type. Inter everywhere: next/font sets --font-inter in the app; a static
     page loads Inter itself and the name in the stack picks it up. */
  --mz-font-sans: var(--font-inter, 'Inter'), ui-sans-serif, system-ui, sans-serif;

  /* Motion, measured in _bmad-output/planning-artifacts/ux-reference/motion-inventory.md. */
  --mz-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Tailwind transition default */
  --mz-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --mz-ease-expo-out: cubic-bezier(0.22, 1, 0.36, 1); /* the progress bar finish, the one custom curve */
  --mz-duration-fast: 100ms; /* menus, popovers, dialogs, the edge handle bars */
  --mz-duration-base: 150ms; /* hover and state colour, focus ring, switch, tooltips */
  --mz-duration-slow: 200ms; /* sheet panel, sidebar width, edge handle label */
  --mz-duration-progress: 350ms; /* progress bar finish and fade */

  /* 2. App ----------------------------------------------------------------- */

  --mz-bg: var(--mz-white);
  --mz-fg: var(--mz-neutral-950); /* 19.80:1 on bg */
  --mz-surface: var(--mz-white); /* cards, popovers */
  --mz-surface-muted: var(--mz-neutral-100); /* hovered rows, secondary buttons */
  --mz-sidebar: var(--mz-neutral-50);
  --mz-fg-muted: var(--mz-neutral-550); /* 5.10:1 on bg, 4.68:1 on surface-muted */
  --mz-fg-strong: var(--mz-neutral-900); /* text on surface-muted (secondary, accent) */
  --mz-border: var(--mz-neutral-200); /* card rings and dividers, decorative */
  --mz-input: var(--mz-neutral-200); /* field fills only: the dark tint, disabled fields, the switch track */
  --mz-control-border: var(--mz-apple-grey); /* the edge of a field, select or switch: 3.62:1 on bg and surface, 3.32:1 on surface-muted */

  /* The action colour. One filled action per form or card. */
  --mz-action: var(--mz-blue-600); /* white text 5.57:1 */
  --mz-action-hover: var(--mz-blue-500); /* white text 4.70:1 */
  --mz-on-action: var(--mz-white);
  --mz-link: var(--mz-blue-600); /* 5.57:1 on bg, 5.11:1 on surface-muted */
  --mz-focus: var(--mz-blue-500); /* rings and focused borders, 4.70:1 on bg */

  /* The brand mark's tile. Ink, not blue: the mark is not an action. */
  --mz-mark: var(--mz-neutral-900);
  --mz-on-mark: var(--mz-neutral-50);

  --mz-danger: var(--mz-red-600); /* 4.77:1 on bg */
  --mz-on-danger: var(--mz-white); /* 4.77:1 on danger */
  --mz-positive: var(--mz-teal-700); /* 5.36:1 on bg */
  --mz-negative: var(--mz-rose-600); /* 4.53:1 on bg */

  /* Stat tiles, per-item dots and charts (the Miro Clinic accents). None is
     blue: blue means action. Items and the second chart series moved from
     blue-600 (#2563eb, 1.08:1 against Action Blue, the same colour) to
     violet. */
  --mz-tile-neutral: var(--mz-neutral-950);
  --mz-on-tile-neutral: var(--mz-white);
  --mz-tile-indigo: var(--mz-indigo-600);
  --mz-tile-cyan: var(--mz-cyan-600);
  --mz-tile-amber: var(--mz-amber-400);
  --mz-on-tile: var(--mz-white);
  --mz-on-tile-amber: var(--mz-neutral-950);
  --mz-item-violet: var(--mz-violet-600);
  --mz-item-fuchsia: var(--mz-fuchsia-600);
  --mz-item-orange: var(--mz-orange-600);
  --mz-item-teal: var(--mz-teal-600);
  --mz-chart-1: var(--mz-sky-300);
  --mz-chart-2: var(--mz-violet-600);
  --mz-chart-3: var(--mz-amber-400);
  --mz-chart-4: var(--mz-teal-600);
  --mz-chart-5: var(--mz-neutral-500);

  --mz-radius: 0.5rem; /* the app's base radius; sm to 4xl derive from it */

  /* 3. Marketing (website) ------------------------------------------------- */
  /* From design/reference/apple.design.md, names kept, values measured. */

  --mz-mk-primary: var(--mz-blue-600); /* pills and links on light, white text 5.57:1 */
  --mz-mk-primary-focus: var(--mz-blue-500); /* 2px focus outline */
  --mz-mk-primary-on-dark: var(--mz-blue-400); /* links on dark tiles, 6.96:1 on black */
  --mz-mk-on-primary: #ffffff;
  --mz-mk-ink: #1d1d1f; /* all text on light, 16.83:1 on canvas, 15.46:1 on parchment */
  --mz-mk-ink-muted: #6e6e73; /* secondary text, 5.07:1 on canvas, 4.66:1 on parchment */
  --mz-mk-ink-muted-80: #333333; /* text on pearl buttons, 12.12:1 */
  --mz-mk-ink-muted-48: #7a7a7a; /* disabled and large legal only: 4.29:1 on canvas */
  --mz-mk-on-dark: #ffffff; /* text on dark tiles */
  --mz-mk-body-muted: #cccccc; /* secondary text on dark tiles, 13.08:1 on black */
  --mz-mk-canvas: #ffffff;
  --mz-mk-canvas-parchment: #f5f5f7;
  --mz-mk-surface-pearl: #fafafc;
  --mz-mk-surface-black: #000000; /* the black tile, the nav bar */
  --mz-mk-surface-tile-1: #272729; /* near-black tile, when two dark tiles stack */
  --mz-mk-surface-tile-2: #2a2a2c;
  --mz-mk-surface-tile-3: #252527;
  --mz-mk-chip-translucent: rgb(210 210 215 / 64%);
  --mz-mk-divider-soft: #f0f0f0;
  --mz-mk-hairline: #e0e0e0; /* decorative card edges only */
  --mz-mk-control-border: var(--mz-apple-grey); /* form fields: 3.62:1 on canvas, 3.33:1 on parchment */

  /* Type: font shorthand plus its tracking. Inter stands in for SF Pro, so
     display sizes take Apple's tracking minus 0.01em and body leading drops
     from 1.47 to 1.44, as the reference advises. Use as
       font: var(--mz-mk-type-body); letter-spacing: var(--mz-mk-tracking-body); */
  --mz-mk-type-hero: 600 56px/1.07 var(--mz-font-sans);
  --mz-mk-tracking-hero: -0.84px;
  --mz-mk-type-display-lg: 600 40px/1.1 var(--mz-font-sans);
  --mz-mk-tracking-display-lg: -0.4px;
  --mz-mk-type-display-md: 600 34px/1.47 var(--mz-font-sans);
  --mz-mk-tracking-display-md: -0.714px;
  --mz-mk-type-lead: 400 28px/1.14 var(--mz-font-sans);
  --mz-mk-tracking-lead: -0.084px;
  --mz-mk-type-lead-airy: 300 24px/1.5 var(--mz-font-sans);
  --mz-mk-tracking-lead-airy: -0.24px;
  --mz-mk-type-tagline: 600 21px/1.19 var(--mz-font-sans);
  --mz-mk-tracking-tagline: 0.021px;
  --mz-mk-type-body: 400 17px/1.44 var(--mz-font-sans);
  --mz-mk-type-body-strong: 600 17px/1.24 var(--mz-font-sans);
  --mz-mk-type-dense-link: 400 17px/2.41 var(--mz-font-sans);
  --mz-mk-tracking-body: -0.374px;
  --mz-mk-type-caption: 400 14px/1.43 var(--mz-font-sans);
  --mz-mk-type-caption-strong: 600 14px/1.29 var(--mz-font-sans);
  --mz-mk-type-button-utility: 400 14px/1.29 var(--mz-font-sans);
  --mz-mk-tracking-caption: -0.224px;
  --mz-mk-type-button-large: 300 18px/1 var(--mz-font-sans);
  --mz-mk-type-fine-print: 400 12px/1.33 var(--mz-font-sans);
  --mz-mk-type-nav-link: 400 12px/1 var(--mz-font-sans);
  --mz-mk-tracking-fine-print: -0.12px;
  --mz-mk-type-micro-legal: 400 10px/1.3 var(--mz-font-sans);
  --mz-mk-tracking-micro-legal: -0.08px;

  /* Spacing: 8 px base, Apple's steps. */
  --mz-mk-space-xxs: 4px;
  --mz-mk-space-xs: 8px;
  --mz-mk-space-sm: 12px;
  --mz-mk-space-md: 17px;
  --mz-mk-space-lg: 24px;
  --mz-mk-space-xl: 32px;
  --mz-mk-space-xxl: 48px;
  --mz-mk-space-section: 80px; /* vertical padding inside a tile; tiles touch */
  --mz-mk-width-text: 980px; /* text-heavy sections */
  --mz-mk-width-grid: 1440px; /* card grids, the content lock */

  --mz-mk-radius-none: 0;
  --mz-mk-radius-xs: 5px;
  --mz-mk-radius-sm: 8px; /* compact utility buttons, inline images */
  --mz-mk-radius-md: 11px; /* pearl capsules */
  --mz-mk-radius-lg: 18px; /* utility cards */
  --mz-mk-radius-pill: 9999px; /* every action: CTAs, chips, search */

  /* The one shadow, for a product image resting on a surface. Never on
     cards, buttons or text. */
  --mz-mk-shadow-product: rgb(0 0 0 / 22%) 3px 5px 30px 0;

  /* The only marketing motion: a press shrinks to 0.95. */
  --mz-mk-press-scale: 0.95;
  --mz-mk-press-duration: var(--mz-duration-base);
  --mz-mk-press-ease: var(--mz-ease-standard);
}

/* App tokens in dark mode. The device decides, never a class. */
@media (prefers-color-scheme: dark) {
  :root {
    --mz-bg: var(--mz-neutral-950);
    --mz-fg: var(--mz-neutral-50); /* 18.97:1 on bg */
    --mz-surface: var(--mz-neutral-900);
    --mz-surface-muted: var(--mz-neutral-800);
    --mz-sidebar: var(--mz-neutral-900);
    --mz-fg-muted: var(--mz-neutral-400); /* 7.66:1 on bg, 5.86:1 on surface-muted */
    --mz-fg-strong: var(--mz-neutral-50);
    --mz-border: rgb(255 255 255 / 10%);
    --mz-input: rgb(255 255 255 / 15%);
    /* 4.18:1 on bg, 3.78:1 on surface, 3.19:1 on surface-muted, and still
       3.40:1 against a field's own tinted fill on a card, so both sides of
       the edge read. */
    --mz-control-border: var(--mz-neutral-500);

    /* White on #2997ff is 3.02:1, so the dark fill is Apple's #0071e3
       (4.70:1). Hover moves toward the background, as it does in light:
       darker here, #0066cc (5.57:1). Links and focus take #2997ff, which
       reads on every dark surface (6.57:1 on bg, 5.02:1 on surface-muted). */
    --mz-action: var(--mz-blue-500);
    --mz-action-hover: var(--mz-blue-600);
    --mz-link: var(--mz-blue-400);
    --mz-focus: var(--mz-blue-400);

    --mz-mark: var(--mz-neutral-200);
    --mz-on-mark: var(--mz-neutral-900);

    --mz-danger: var(--mz-red-400); /* 6.85:1 on bg */
    --mz-on-danger: var(--mz-neutral-950);
    --mz-positive: var(--mz-teal-500);
    --mz-negative: var(--mz-rose-500);

    /* Graphics on #171717 cards and the #0a0a0a panel: every value is at
       least 3:1 against both. The neutral tile flips light, or it vanishes. */
    --mz-tile-neutral: var(--mz-neutral-200);
    --mz-on-tile-neutral: var(--mz-neutral-950);
    --mz-tile-indigo: var(--mz-indigo-500);
    --mz-item-violet: var(--mz-violet-500);
    --mz-item-fuchsia: var(--mz-fuchsia-500);
    --mz-item-orange: var(--mz-orange-500);
    --mz-item-teal: var(--mz-teal-500);
    --mz-chart-2: var(--mz-violet-500);
    --mz-chart-4: var(--mz-teal-500);
    --mz-chart-5: var(--mz-neutral-400);
  }
}