/* ============================================================
   MarketingOS — Design tokens
   Sage + Dusty Rose · calm, strategic, creative
   ============================================================ */

:root {
  /* Brand color system */
  --sage:        #AABD8C;  /* primary actions, success, active nav */
  --sage-deep:   #8CA26B;  /* hover / borders on sage */
  --sage-ink:    #5F7444;  /* text on light sage */
  --sage-light:  #D8E3CB;  /* card fills, categories, soft highlights */
  --sage-mist:   #EBF1E2;  /* faintest sage wash */
  --cream:       #F8F6EF;  /* app background */
  --cream-card:  #FFFDF8;  /* raised card surface */
  --rose:        #D98C9A;  /* AI + strategic moments — use sparingly */
  --rose-deep:   #C06F7F;
  --rose-light:  #F3DDE1;
  --gunmetal:    #35393C;  /* nav, primary text, headers */
  --gunmetal-2:  #2C2F32;  /* sidebar depth */
  --ink:         #35393C;
  --ink-soft:    #6B6F66;  /* secondary text */
  --ink-faint:   #9A9E93;  /* tertiary text, placeholders */
  --line:        #E7E3D6;  /* hairline borders on cream */
  --line-soft:   #EFECE1;

  /* Status */
  --ok:      var(--sage-ink);
  --warn:    #C99A5B;
  --danger:  #C06F7F;

  /* Type */
  --font-logo: 'Brittany Signature', 'Ms Madi', cursive;
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

  /* Radii + shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(53, 57, 60, .05), 0 2px 8px rgba(53, 57, 60, .04);
  --shadow-md: 0 2px 6px rgba(53, 57, 60, .06), 0 10px 28px rgba(53, 57, 60, .07);
  --shadow-lg: 0 4px 12px rgba(53, 57, 60, .08), 0 24px 48px rgba(53, 57, 60, .10);

  /* Layout */
  --sidebar-w: 232px;
  --topbar-h: 68px;
  --gutter: clamp(16px, 2.6vw, 30px);
}

/* ============================================================
   Color schemes — picked in Settings → Appearance.
   Each swaps the primary (sage) family; dusty rose accents and
   the gunmetal sidebar stay constant so AI moments, destructive
   actions, and contrast are always consistent.
   ============================================================ */

[data-theme="ocean"] {
  --sage:       #8FAEBF;
  --sage-deep:  #6F93A6;
  --sage-ink:   #3F6273;
  --sage-light: #CFE0E8;
  --sage-mist:  #E6EFF3;
}

[data-theme="lavender"] {
  --sage:       #A79BC8;
  --sage-deep:  #8B7DB3;
  --sage-ink:   #5D5382;
  --sage-light: #DDD6EC;
  --sage-mist:  #EFEBF6;
}

[data-theme="terracotta"] {
  --sage:       #C99772;
  --sage-deep:  #B37F58;
  --sage-ink:   #8A5A36;
  --sage-light: #EBD8C8;
  --sage-mist:  #F5EBE1;
}

[data-theme="slate"] {
  --sage:       #93A1AD;
  --sage-deep:  #76858F;
  --sage-ink:   #46545E;
  --sage-light: #D3DAE0;
  --sage-mist:  #E9EDF0;
}

/* Neutral schemes — these also swap the rose accent family
   (amber / copper / teal), so nothing pink remains. */

[data-theme="forest"] {
  --sage:       #7FA06B;
  --sage-deep:  #66854F;
  --sage-ink:   #435C33;
  --sage-light: #CCDCBD;
  --sage-mist:  #E6EFDD;
  --rose:       #C99A5B;   /* amber */
  --rose-deep:  #A87B3F;
  --rose-light: #F0E2CB;
}

[data-theme="navy"] {
  --sage:       #7C93B8;
  --sage-deep:  #60789E;
  --sage-ink:   #3D5170;
  --sage-light: #CBD7E7;
  --sage-mist:  #E6ECF4;
  --rose:       #B98A5E;   /* copper */
  --rose-deep:  #97653D;
  --rose-light: #EBDDCB;
}

[data-theme="graphite"] {
  --sage:       #8A9199;
  --sage-deep:  #6E767F;
  --sage-ink:   #47505A;
  --sage-light: #D2D6DA;
  --sage-mist:  #E8EAED;
  --rose:       #6FA3A0;   /* teal */
  --rose-deep:  #4F8280;
  --rose-light: #D8E8E7;
}