/* =========================================================================
   TIER 1 — PRIMITIVES
   Raw values. These have no opinions about where they're used.
   Never reference tier 1 tokens directly from a component.
   Always route through tier 2 (theme) tokens.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Color — brand ramps from Melissa's Canva brand kit
     ----------------------------------------------------------------------- */

  /* Cream / surface */
  --color-cream-50: #ffffff;
  --color-cream-100: #f8f1db;
  --color-cream-200: #f0e8c9;
  --color-cream-300: #e6dcad;

  /* Sun — warm orange */
  --color-sun-300: #ffcc66;
  --color-sun-500: #ffab00;
  --color-sun-700: #cc8800;

  /* Ember — vivid orange */
  --color-ember-300: #f58050;
  --color-ember-500: #e95400;
  --color-ember-700: #b84200;

  /* Crimson — use sparingly, emotionally loud */
  --color-crimson-500: #9c1933;
  --color-crimson-700: #741426;

  /* Plum — use sparingly */
  --color-plum-500: #5f1b51;
  --color-plum-700: #47143c;

  /* Leaf — kermit green */
  --color-leaf-300: #5fa32e;
  --color-leaf-500: #37790c;
  --color-leaf-700: #275509;

  /* Forest */
  --color-forest-500: #02491c;
  --color-forest-700: #013314;

  /* Charcoal — neutrals for text and borders */
  --color-charcoal-50: #f5f5f5;
  --color-charcoal-100: #e0e0e0;
  --color-charcoal-300: #9a9a9a;
  --color-charcoal-500: #7a7a7a;
  --color-charcoal-700: #4d4d4d;
  --color-charcoal-900: #1f1f1f;

  /* -----------------------------------------------------------------------
     Typography — raw families, sizes, line heights, weights
     ----------------------------------------------------------------------- */

  --font-family-display: "Aboreto", "Trajan Pro", "Times New Roman", serif;
  --font-family-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-size-50: 0.75rem;   /* 12px */
  --font-size-100: 0.875rem; /* 14px */
  --font-size-200: 1rem;     /* 16px */
  --font-size-300: 1.125rem; /* 18px */
  --font-size-400: 1.375rem; /* 22px */
  --font-size-500: 1.75rem;  /* 28px */
  --font-size-600: 2.25rem;  /* 36px */
  --font-size-700: 3rem;     /* 48px */
  --font-size-800: 4rem;     /* 64px */

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-default: 1.6;
  --line-height-loose: 1.8;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-default: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.12em;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* -----------------------------------------------------------------------
     Spacing — raw scale (rem-based, visually harmonious ratio)
     ----------------------------------------------------------------------- */

  --size-50: 0.125rem;  /* 2px */
  --size-100: 0.25rem;  /* 4px */
  --size-200: 0.5rem;   /* 8px */
  --size-300: 1rem;     /* 16px */
  --size-400: 1.5rem;   /* 24px */
  --size-500: 2rem;     /* 32px */
  --size-600: 3rem;     /* 48px */
  --size-700: 5rem;     /* 80px */
  --size-800: 8rem;     /* 128px */
  --size-900: 12rem;    /* 192px */

  /* -----------------------------------------------------------------------
     Radii, shadows, measures
     ----------------------------------------------------------------------- */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --shadow-none: none;
  --shadow-soft: 0 2px 8px rgba(77, 77, 77, 0.08);
  --shadow-lifted: 0 8px 24px rgba(77, 77, 77, 0.12);
  --shadow-floating: 0 16px 48px rgba(77, 77, 77, 0.16);

  --measure-narrow: 45ch;
  --measure-body: 65ch;
  --measure-wide: 80ch;

  /* -----------------------------------------------------------------------
     Motion
     ----------------------------------------------------------------------- */

  --duration-fast: 120ms;
  --duration-default: 240ms;
  --duration-slow: 480ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);

  /* -----------------------------------------------------------------------
     Layout container widths
     ----------------------------------------------------------------------- */

  --container-narrow: 40rem;   /* 640px */
  --container-body: 56rem;     /* 896px */
  --container-wide: 72rem;     /* 1152px */
  --container-full: 90rem;     /* 1440px */
}