/* ============================================================
   Appointa Design Tokens
   Cream / Soft White surfaces + Matte Emerald accent
   Quiet Luxury typography
   ============================================================ */

:root {
  /* ── Color Tokens: named brand palette ──────────────────── */
  --color-cream:         #F2EBDD;
  --color-soft-white:    #FFFDF9;
  --color-divider:       #E6DECF;
  --color-ink:           #0A0A0A;
  --color-emerald-deep:  #0B413B;
  --color-emerald:       #13544D;

  /* ── Accent (emerald — Quiet Luxury) ───────────────────── */
  --color-lavender-deep:  var(--color-emerald-deep); /* legacy alias */
  --color-lavender:       var(--color-emerald);      /* legacy alias */
  --gradient-lavender:    linear-gradient(179deg, #0B413B 1%, #13544D 100%);
  --gradient-lavender-135: linear-gradient(135deg, #0B413B 0%, #13544D 100%);
  --border-accent:        rgba(11, 65, 59, 0.45);
  --accent-light:         #2E8B7A;

  /* Accent alpha — prefer over hardcoded rgba in app CSS */
  --accent-alpha-06: rgba(11, 65, 59, 0.06);
  --accent-alpha-08: rgba(11, 65, 59, 0.08);
  --accent-alpha-10: rgba(11, 65, 59, 0.10);
  --accent-alpha-12: rgba(11, 65, 59, 0.12);
  --accent-alpha-14: rgba(11, 65, 59, 0.14);
  --accent-alpha-15: rgba(11, 65, 59, 0.15);
  --accent-alpha-18: rgba(11, 65, 59, 0.18);
  --accent-alpha-20: rgba(11, 65, 59, 0.20);
  --accent-alpha-22: rgba(11, 65, 59, 0.22);
  --accent-alpha-25: rgba(11, 65, 59, 0.25);
  --accent-alpha-35: rgba(11, 65, 59, 0.35);
  --accent-alpha-40: rgba(11, 65, 59, 0.40);
  --accent-alpha-45: rgba(11, 65, 59, 0.45);
  --accent-alpha-50: rgba(11, 65, 59, 0.50);

  /* ── Surface hierarchy (cream) ──────────────────────────── */
  --color-graphite-canvas: var(--color-cream);       /* legacy alias */
  --color-graphite-panel:  var(--color-soft-white);  /* legacy alias */
  --color-graphite-edge:   var(--color-divider);     /* legacy alias */
  --color-steel:           #6B6B68;
  --color-slate:           #4A4A48;
  --color-smoke:           #F0E9D8;
  --color-paper:           #ffffff;
  --color-fog:             #4A4A48;
  --color-ash:             #6B6B68;
  --surface-product-white: #ffffff;

  /* ── Semantic backgrounds ───────────────────────────────── */
  --bg-base:      var(--color-cream);
  --bg-canvas:    var(--color-cream);
  --bg-surface:   var(--color-soft-white);
  --bg-surface-2: #F7F1E6;
  --bg-card:      var(--color-soft-white);
  --bg-elevated:  #FFFDF9;
  --bg-hover:     #F0E9D8;
  --bg-input:     #FFFDF9;

  /* ── Accent aliases (admin + TWA) ─────────────────────── */
  --accent:         var(--color-emerald-deep);
  --accent-2:       var(--color-emerald);
  --accent-grad:    var(--gradient-lavender-135);
  --accent-glow:    var(--shadow-emerald);

  /* ── Text ─────────────────────────────────────────────── */
  --text-primary:     #0A0A0A;
  --text-secondary:   #4A4A48;
  --text-muted:       #6B6B68;
  --text-on-lavender: #FFFDF9;

  /* ── Borders ──────────────────────────────────────────── */
  --border:          #E6DECF;
  --border-subtle:   rgba(230, 222, 207, 0.6);
  --border-graphite: rgba(230, 222, 207, 0.85);

  /* ── Status (muted premium tones) ─────────────────────── */
  --success: #406B5C;
  --warning: #C99A62;
  --danger:  #A34843;
  --info:    #4A7CB3;

  /* Status alpha helpers */
  --success-alpha-10: rgba(64, 107, 92, 0.10);
  --success-alpha-15: rgba(64, 107, 92, 0.15);
  --success-alpha-25: rgba(64, 107, 92, 0.25);
  --warning-alpha-10: rgba(201, 154, 98, 0.10);
  --warning-alpha-12: rgba(201, 154, 98, 0.12);
  --warning-alpha-15: rgba(201, 154, 98, 0.15);
  --warning-alpha-25: rgba(201, 154, 98, 0.25);
  --danger-alpha-10:  rgba(163, 72, 67, 0.10);
  --danger-alpha-12:  rgba(163, 72, 67, 0.12);
  --danger-alpha-15:  rgba(163, 72, 67, 0.15);
  --danger-alpha-25:  rgba(163, 72, 67, 0.25);
  --danger-alpha-35:  rgba(163, 72, 67, 0.35);
  --info-alpha-10:    rgba(74, 124, 179, 0.10);
  --info-alpha-15:    rgba(74, 124, 179, 0.15);
  --info-alpha-25:    rgba(74, 124, 179, 0.25);

  /* ── Typography (Quiet Luxury) ───────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --font:         var(--font-body);

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  2.25rem;   /* 36px */
  --font-size-display: 4.125rem; /* 66px max display */

  /* ── Spacing (8px scale) ──────────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius:       16px;
  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-pill:  30px;
  --radius-nav:   60px;

  /* Legacy radius aliases */
  --r-sm:   var(--radius-sm);
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --r-xl:   var(--radius-xl);
  --r-full: 100px;

  /* ── Shadow Tokens ────────────────────────────────────── */
  --shadow-xs:         0 1px 2px rgba(10, 10, 10, 0.05);
  --shadow-card:       0 1px 4px rgba(10, 10, 10, 0.06), 0 4px 16px rgba(10, 10, 10, 0.04);
  --shadow-card-hover: 0 8px 32px rgba(10, 10, 10, 0.10);
  --shadow-emerald:    0 4px 24px rgba(11, 65, 59, 0.18);
  --shadow-emerald-lg: 0 8px 40px rgba(11, 65, 59, 0.22);
  --shadow-modal:      0 20px 60px rgba(10, 10, 10, 0.12);
  --shadow-nav:        0 2px 16px rgba(10, 10, 10, 0.08);

  /* Legacy glow aliases → shadow tokens */
  --glow-lavender:     var(--shadow-emerald);
  --glow-lavender-lg:  var(--shadow-emerald-lg);
  --glow-accent:       var(--shadow-emerald);
  --glow-accent-lg:    var(--shadow-emerald-lg);

  /* ── Motion Tokens ────────────────────────────────────── */
  --motion-instant:    0.08s;
  --motion-fast:       0.15s;
  --motion-medium:     0.28s;
  --motion-slow:       0.45s;
  --motion-entrance:   0.55s;

  --ease-out:          ease-out;
  --ease-in-out:       ease-in-out;
  --ease-out-expo:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:       cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out-back:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Legacy transition aliases */
  --t-fast:   var(--motion-fast)   var(--ease-out);
  --t-normal: var(--motion-medium) var(--ease-out);
  --t-slow:   var(--motion-slow)   var(--ease-out);
  --t:        var(--motion-fast)   var(--ease-out);

  /* ── Legacy aliases (migrate away gradually) ────────────── */
  --color-voltage-blue:  var(--color-emerald-deep);
  --color-signal-violet: var(--color-emerald);
  --gradient-signal:     var(--gradient-lavender);
  --gradient-signal-135: var(--gradient-lavender-135);
  --color-midnight:      var(--color-cream);
  --color-midnight-ink:  var(--color-cream);
  --color-carbon:        var(--color-soft-white);
  --color-graphite:      var(--color-divider);
}

/* ── User colour mode ────────────────────────────────────── */
/* The application sets data-color-theme after resolving the user's saved
   preference (light, dark, or system). Keep this semantic override at the
   token layer so every admin and landing surface follows it consistently. */
:root[data-color-theme='dark'] {
  color-scheme: dark;
  --color-cream: #102A24;
  --color-soft-white: #1E4037;
  --color-divider: #547A6E;
  --color-ink: #FFF9EF;
  --color-emerald-deep: #8BD2BF;
  --color-emerald: #B2E5D7;
  --gradient-lavender: linear-gradient(179deg, #75C5B3 1%, #4D9D8B 100%);
  --gradient-lavender-135: linear-gradient(135deg, #75C5B3 0%, #4D9D8B 100%);
  --border-accent: rgba(154, 224, 208, 0.5);
  --accent-light: #A9E8D8;
  --accent-alpha-06: rgba(154, 224, 208, 0.06);
  --accent-alpha-08: rgba(154, 224, 208, 0.08);
  --accent-alpha-10: rgba(154, 224, 208, 0.10);
  --accent-alpha-12: rgba(154, 224, 208, 0.12);
  --accent-alpha-14: rgba(154, 224, 208, 0.14);
  --accent-alpha-15: rgba(154, 224, 208, 0.15);
  --accent-alpha-18: rgba(154, 224, 208, 0.18);
  --accent-alpha-20: rgba(154, 224, 208, 0.20);
  --accent-alpha-22: rgba(154, 224, 208, 0.22);
  --accent-alpha-25: rgba(154, 224, 208, 0.25);
  --accent-alpha-35: rgba(154, 224, 208, 0.35);
  --accent-alpha-40: rgba(154, 224, 208, 0.40);
  --accent-alpha-45: rgba(154, 224, 208, 0.45);
  --accent-alpha-50: rgba(154, 224, 208, 0.50);
  --color-steel: #A7B5AF;
  --color-slate: #D0DAD5;
  --color-smoke: #294C42;
  --color-paper: #26493F;
  --color-fog: #D0DAD5;
  --color-ash: #A7B5AF;
  --surface-product-white: #26493F;
  --bg-surface-2: #294D43;
  --bg-elevated: #315B4F;
  --bg-hover: #396A5C;
  --bg-input: #17362E;
  --text-primary: #FFF9EF;
  --text-secondary: #DCE6DF;
  --text-muted: #B8C9C1;
  --text-on-lavender: #16322A;
  --border: #507168;
  --border-subtle: rgba(86, 118, 109, 0.65);
  --border-graphite: rgba(86, 118, 109, 0.88);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.30);
  --shadow-emerald: 0 4px 24px rgba(117, 197, 179, 0.18);
  --shadow-emerald-lg: 0 8px 40px rgba(117, 197, 179, 0.26);
  --shadow-modal: 0 24px 72px rgba(0, 0, 0, 0.38);
  --shadow-nav: 0 2px 18px rgba(0, 0, 0, 0.28);
}