/* ============================================================
   DESIGN SYSTEM — Tokens
   Notion-inspired palette with a teal (#0D9488) primary CTA.
   ============================================================ */

:root {
  /* Brand & primary (teal) */
  --color-primary:         #0D9488;
  --color-primary-pressed: #0B7A6F;
  --color-primary-deep:    #064E47;
  --color-primary-soft:    #CCFBF1;
  --color-on-primary:      #FFFFFF;

  /* Notion brand fallback */
  --color-accent: #6649EB;
  --color-link-blue: #2383E2;

  /* Card tints (pastel feature backgrounds) */
  --color-card-tint-peach:    #FBECDD;
  --color-card-tint-rose:     #FBE4E4;
  --color-card-tint-mint:     #DDEDEA;
  --color-card-tint-lavender: #EAE4F2;
  --color-card-tint-sky:      #DDEBF1;
  --color-card-tint-yellow:   #FBF3DB;
  --color-card-tint-cream:    #F5F0E6;

  /* Surfaces */
  --color-canvas:          #FFFFFF;
  --color-surface:         #F7F6F3;
  --color-app-bg:          #F7F6F3;
  --color-app-panel:       #FFFFFF;
  --color-app-border:      #E8E7E2;
  --color-app-border-soft: #F0EFEB;
  --color-app-hover:       #F1F0EC;
  --color-hairline:        #EBEBEA;
  --color-hairline-strong: #D9D9D6;

  /* Text */
  --color-ink-deep: #0F0F0F;
  --color-ink:      #191918;
  --color-charcoal: #37352F;
  --color-slate:    #6F6E69;
  --color-steel:    #8E8C85;
  --color-stone:    #ACAAA3;
  --color-muted:    #BFBDB6;
  --color-on-dark:  #FFFFFF;

  /* Status */
  --color-success: #4A9C61;
  --color-warning: #E59947;
  --color-error:   #D44C47;

  --color-status-active-bg:    #DCFCE7; --color-status-active-fg:    #166534;
  --color-status-pending-bg:   #FEF3C7; --color-status-pending-fg:   #92400E;
  --color-status-blocked-bg:   #FEE2E2; --color-status-blocked-fg:   #991B1B;
  --color-status-draft-bg:     #E2E8F0; --color-status-draft-fg:     #475569;
  --color-status-published-bg: #DBEAFE; --color-status-published-fg: #1E40AF;

  /* Typography */
  --font-heading: 'Cairo', 'Inter', -apple-system, system-ui, sans-serif;
  --font-body:    'Tajawal', 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing (4px base) */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-1: 0 1px 2px  rgba(15,15,15,0.04);
  --shadow-2: 0 4px 12px rgba(15,15,15,0.08);
  --shadow-3: 0 24px 48px -8px rgba(15,15,15,0.20);
  --shadow-4: 0 16px 48px -8px rgba(15,15,15,0.16);

  /* Density */
  --row-pad-y: 14px;
  --nav-height: 64px;
}

:root[data-density="compact"] { --row-pad-y: 8px; }

:root[data-theme="dark"] {
  --color-app-bg:       #0F1216;
  --color-app-panel:    #161A20;
  --color-app-border:   #252A33;
  --color-app-hover:    #1B2028;
  --color-canvas:       #161A20;
  --color-surface:      #1B2028;
  --color-charcoal:     #E8E8E4;
  --color-ink:          #FFFFFF;
  --color-ink-deep:     #FFFFFF;
  --color-slate:        #A0A4AC;
  --color-stone:        #7A7E85;
  --color-hairline:     #252A33;
  --color-primary-soft: rgba(13,148,136,0.18);
}