/* Quotilo Design Tokens — Single source of truth for all CSS custom properties */
/* Also mirrored at frontend/assets/styles/tokens.css (Dockerfile copies to /app/static/assets/) */

:root {
  /* ─── Colour palette ─── */
  --color-charcoal:     #111827;
  --color-deep-teal:    #0F766E;
  --color-teal-accent:  #14B8A6;
  --color-soft-mint:    #ECFDF5;
  --color-bg:           #FFFFFF;
  --color-surface:      #F8FAFC;
  --color-border:       #E5E7EB;
  --color-muted:        #64748B;
  --color-warm-yellow:  #FACC15;

  /* ─── Semantic aliases ─── */
  --color-text:         var(--color-charcoal);
  --color-text-muted:   var(--color-muted);
  --color-primary:      var(--color-deep-teal);
  --color-primary-dark: #0a5754;
  --color-accent:       var(--color-teal-accent);

  /* ─── Typography ─── */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs:      12px;
  --text-sm:      14px;
  --text-base:    16px;
  --text-md:      18px;
  --text-lg:      20px;
  --text-xl:      24px;
  --text-2xl:     30px;
  --text-3xl:     36px;
  --text-4xl:     48px;
  --text-5xl:     64px;
  --font-normal:  400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;
  --leading-tight:1.1;
  --leading-snug: 1.3;
  --leading-base: 1.6;

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

  /* ─── Border radius ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* ─── Shadows ─── */
  --shadow-xs:  0 1px 2px rgba(17,24,39,.06);
  --shadow-sm:  0 1px 3px rgba(17,24,39,.10), 0 1px 2px rgba(17,24,39,.06);
  --shadow-md:  0 4px 6px rgba(17,24,39,.07), 0 2px 4px rgba(17,24,39,.06);
  --shadow-lg:  0 10px 15px rgba(17,24,39,.08), 0 4px 6px rgba(17,24,39,.05);
  --shadow-xl:  0 20px 40px rgba(17,24,39,.12);

  /* ─── Button tokens ─── */
  --btn-primary-bg:      var(--color-deep-teal);
  --btn-primary-bg-hover:#0a5754;
  --btn-primary-color:   #fff;
  --btn-secondary-border:var(--color-charcoal);
  --btn-secondary-color: var(--color-charcoal);
  --btn-secondary-bg:    transparent;

  /* ─── Component tokens ─── */
  --card-bg:      var(--color-bg);
  --card-border:  var(--color-border);
  --card-radius:  var(--radius-md);
  --input-border: var(--color-border);
  --input-radius: var(--radius-sm);
  --badge-radius: var(--radius-pill);
  --container-max:1100px;
  --container-px: 24px;
}