/* L Studio — Color tokens
   Deep teal leads, sage supports, warm neutrals + a single clay accent.
   Base ramps first, then semantic aliases. */
:root {
  /* Teal ramp */
  --teal-50: #E7F1F1;
  --teal-100: #C8E0E0;
  --teal-200: #9DC7C6;
  --teal-300: #6BA8A8;
  --teal-400: #3E8488;
  --teal-500: #1A6A6F;
  --teal-700: #0D454A;
  --teal-800: #0C3D42;
  --teal-900: #08292D;

  /* Sage ramp */
  --sage-50: #F1F8F7;
  --sage-100: #E0EFED;
  --sage-200: #C3E0DC;
  --sage-300: #AED5D0;
  --sage-400: #97C4C0;
  --sage-500: #89B5B1;
  --sage-600: #6F9D99;
  --sage-700: #557E7B;

  /* Brand anchors */
  --deep-teal: #0D454A;   /* primary brand & actions  (teal/700) */
  --ink: #0E2E31;         /* headings & body text */
  --sage: #97C4C0;        /* secondary & accents      (sage/400) */
  --eucalyptus: #89B5B1;  /* hover & depth            (sage/500) */
  --mist: #EAF3F2;        /* tinted surfaces */
  --mist-line: #CFE3E0;   /* border on mist surfaces */

  /* Neutrals (cool, teal-leaning grey) */
  --paper: #F9FAFB;       /* page background */
  --white: #FFFFFF;       /* cards & surfaces */
  --line: #E2EAE9;        /* default borders & dividers */
  --line-strong: #D9E2E1; /* input borders */
  --slate: #5B6B6C;       /* secondary text */
  --slate-soft: #3C4F50;  /* body text */
  --muted: #94A5A4;       /* labels, captions, meta */

  /* Accents */
  --sand: #E7DCC6;        /* warm backgrounds */
  --sand-tint: #F4ECDC;   /* warm tinted surface */
  --sand-ink: #7A6B4E;    /* text on sand */
  --clay: #C98A66;        /* highlights, used sparingly */

  /* On-dark helpers (text over deep teal / ink) */
  --on-dark: #F9FAFB;
  --on-dark-soft: #C5D8D6;
  --on-dark-muted: #7FA6A4;
  --on-dark-line: rgba(255,255,255,0.16);

  /* Semantic aliases */
  --brand: var(--deep-teal);
  --brand-hover: var(--teal-800);
  --accent: var(--sage);
  --accent-hover: var(--eucalyptus);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-tint: var(--mist);
  --surface-warm: var(--sand-tint);
  --surface-dark: var(--deep-teal);
  --surface-ink: var(--ink);

  --text-heading: var(--ink);
  --text-body: var(--slate-soft);
  --text-secondary: var(--slate);
  --text-muted: var(--muted);
  --text-eyebrow: var(--teal-500);
  --text-on-brand: var(--white);

  --border: var(--line);
  --border-input: var(--line-strong);

  /* Status (mapped onto the brand family) */
  --status-active-bg: var(--mist);
  --status-active-fg: var(--deep-teal);
  --status-active-line: var(--mist-line);
  --status-draft-bg: var(--sand-tint);
  --status-draft-fg: var(--sand-ink);
  --status-draft-line: var(--sand);
  --status-neutral-bg: #EEF2F1;
  --status-neutral-fg: var(--slate);
  --status-neutral-line: var(--line-strong);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(16,79,85,0.12);
}