/*
 * Cloud Grow — Canonical Brand Tokens (importable)
 *
 * THE single source of truth for the brand's CSS custom properties. Every visual surface
 * (websites, the platform, documents) imports THIS file and must NOT re-declare these values.
 * Human documentation + rationale: colours.md, typography.md, tokens.md (this file is the machine form).
 *
 * Consume (via the cg-brand-assets submodule mounted in your repo), e.g.:
 *   @import "../brand/tokens.css";        (CSS)
 *   import "@brand/tokens.css";           (bundler, if aliased)
 * Then reference var(--color-purplue) etc. Never paste these values into your own stylesheet.
 */
:root {
  /* Colour -- Brand */
  --color-periwinkle: #B8BFFF;
  --color-grape: #775FEC;
  --color-purplue: #5915B9;
  --color-russian-violet: #2C0F5B;
  --color-coral: #F89389;
  --color-chinese-violet: #796481;
  --color-prussian-blue: #0A273A;
  --color-mercury: #ECECEC;
  --color-lavender: #E2E0FF;
  --color-breeze: #D2E4EE;
  --color-freeze: #B6DAE4;

  /* Colour -- Greyscale (violet-tinted) */
  --grey-50: #FAF9FC; --grey-100: #F3F1F6; --grey-200: #E6E3EC;
  --grey-300: #D1CDD9; --grey-400: #B0ABBA; --grey-500: #8F899C;
  --grey-600: #6E6880; --grey-700: #524D60; --grey-800: #383344;
  --grey-900: #211D2B; --grey-950: #14111A;

  /* Colour -- Semantic */
  --color-success: #34C77B;
  --color-warning: #F5A623;
  --color-error: #E5484D;
  --color-info: #B8BFFF;

  /* Colour -- Signal / Accent (editorial highlight — NOT system status; see colours.md. CG-10482)
     Greens trend teal, warm accents desaturated (image-treatment rule). Accent/fill colours, not
     body text: strongest on the dark ground; use dark text on the light fills. */
  --color-signal-positive: #27C39A;       /* Verdant — positive-signal accent (best on dark)        */
  --color-signal-positive-deep: #1E8E6E;  /* Pine — positive text/icon/border on light (AA large/UI) */
  --color-signal-attention: #E07A5F;      /* Terracotta — warm call-out / emphasis (extends Coral)   */

  /* Typography -- Families. Display token = Inter: the web/implementation overlay for the spec's
     Neue Haas Grotesk Display (a licensed font with no webfont — it can never load). The SPEC is
     unchanged (typography.md Tier 1 = Neue Haas, alt Inter); see substitutions.md "Display font on
     web / digital implementation → Inter" + CLAUDE.md. Do NOT reinstate Neue Haas in this token. */
  --font-display: 'Inter', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Typography -- Scale */
  --text-display: 72px; --text-h1: 56px; --text-h2: 40px; --text-h3: 32px;
  --text-h4: 24px; --text-h5: 20px; --text-body-lg: 18px; --text-body: 16px;
  --text-sm: 14px; --text-overline: 12px; --text-fine: 11px;

  /* Typography -- Leading */
  --leading-display: 1.05; --leading-heading: 1.2;
  --leading-body: 1.7; --leading-tight: 1.4;

  /* Typography -- Tracking */
  --tracking-display: -0.03em; --tracking-heading: -0.015em;
  --tracking-overline: 0.08em; --tracking-fine: 0.05em;

  /* Spacing (8px base) */
  --space-4xs: 2px; --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px;
  --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px;
  --space-2xl: 64px; --space-3xl: 80px; --space-4xl: 96px;
  --space-5xl: 128px; --space-6xl: 160px;

  /* Border Radius */
  --radius-sm: 4px;   /* Badges, tags, small chips */
  --radius-md: 8px;   /* Buttons, inputs, small cards */
  --radius-lg: 12px;  /* Cards, dialogs, panels */
  --radius-xl: 16px;  /* Hero cards, feature panels */
  --radius-full: 9999px; /* Avatars, pills, toggle tracks */

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(44, 15, 88, 0.04);
  --shadow-md: 0 2px 16px rgba(44, 15, 88, 0.06);
  --shadow-lg: 0 4px 24px rgba(44, 15, 88, 0.1);
  --shadow-xl: 0 8px 40px rgba(44, 15, 88, 0.14);

  /* Motion -- Durations */
  --duration-instant: 100ms; --duration-fast: 150ms;
  --duration-normal: 250ms; --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* Motion -- Easing */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Layout -- Max Widths */
  --max-width-marketing: 1200px;
  --max-width-dashboard: 1440px;
  --max-width-prose: 720px;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(119, 95, 236, 0.15);
  --focus-ring-error: 0 0 0 3px rgba(229, 72, 77, 0.15);
}