/* Publicly — Design Tokens
   Import this file into your global CSS.
   All design decisions live here; components reference tokens only. */

:root {
  /* ── Brand Blue ────────────────────────────────────── */
  --pub-blue-50:   #EFF6FF;
  --pub-blue-100:  #DBEAFE;
  --pub-blue-200:  #BFDBFE;
  --pub-blue-300:  #93C5FD;
  --pub-blue-400:  #60A5FA;
  --pub-blue-500:  #3B82F6;   /* brand light  */
  --pub-blue-600:  #2563EB;   /* brand primary — most UI use */
  --pub-blue-700:  #1D4ED8;   /* brand dark   */
  --pub-blue-800:  #1E40AF;
  --pub-blue-900:  #1E3A8A;

  /* ── Neutral Slate ─────────────────────────────────── */
  --pub-slate-50:  #F8FAFC;
  --pub-slate-100: #F1F5F9;
  --pub-slate-200: #E2E8F0;
  --pub-slate-300: #CBD5E1;
  --pub-slate-400: #94A3B8;
  --pub-slate-500: #64748B;
  --pub-slate-600: #475569;
  --pub-slate-700: #334155;
  --pub-slate-800: #1E293B;
  --pub-slate-900: #0F172A;   /* page background dark */

  /* ── Semantic Colours ──────────────────────────────── */
  --pub-success:   #22C55E;
  --pub-warning:   #F59E0B;
  --pub-error:     #EF4444;
  --pub-info:      #0EA5E9;

  /* ── Semantic Aliases ──────────────────────────────── */
  --pub-primary:        var(--pub-blue-600);
  --pub-primary-hover:  var(--pub-blue-700);
  --pub-primary-subtle: var(--pub-blue-50);
  --pub-text:           var(--pub-slate-900);
  --pub-text-muted:     var(--pub-slate-500);
  --pub-text-inverse:   #FFFFFF;
  --pub-border:         var(--pub-slate-200);
  --pub-surface:        #FFFFFF;
  --pub-surface-raised: var(--pub-slate-50);
  --pub-bg:             var(--pub-slate-50);

  /* ── Typography ────────────────────────────────────── */
  --pub-font-sans:   system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pub-font-mono:   ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  --pub-text-xs:   0.75rem;    /*  12px */
  --pub-text-sm:   0.875rem;   /*  14px */
  --pub-text-base: 1rem;       /*  16px */
  --pub-text-lg:   1.125rem;   /*  18px */
  --pub-text-xl:   1.25rem;    /*  20px */
  --pub-text-2xl:  1.5rem;     /*  24px */
  --pub-text-3xl:  1.875rem;   /*  30px */
  --pub-text-4xl:  2.25rem;    /*  36px */

  --pub-weight-normal:   400;
  --pub-weight-medium:   500;
  --pub-weight-semibold: 600;
  --pub-weight-bold:     700;

  --pub-leading-tight:  1.25;
  --pub-leading-normal: 1.5;
  --pub-leading-loose:  1.75;
  --pub-tracking-tight: -0.02em;

  /* ── Spacing (4-pt grid) ───────────────────────────── */
  --pub-space-1:  0.25rem;   /*  4px */
  --pub-space-2:  0.5rem;    /*  8px */
  --pub-space-3:  0.75rem;   /* 12px */
  --pub-space-4:  1rem;      /* 16px */
  --pub-space-5:  1.25rem;   /* 20px */
  --pub-space-6:  1.5rem;    /* 24px */
  --pub-space-8:  2rem;      /* 32px */
  --pub-space-10: 2.5rem;    /* 40px */
  --pub-space-12: 3rem;      /* 48px */
  --pub-space-16: 4rem;      /* 64px */
  --pub-space-20: 5rem;      /* 80px */
  --pub-space-24: 6rem;      /* 96px */

  /* ── Radius ────────────────────────────────────────── */
  --pub-radius-sm:  0.25rem;   /*  4px */
  --pub-radius-md:  0.5rem;    /*  8px */
  --pub-radius-lg:  0.75rem;   /* 12px */
  --pub-radius-xl:  1rem;      /* 16px */
  --pub-radius-2xl: 1.5rem;    /* 24px */
  --pub-radius-full: 9999px;

  /* ── Shadow ────────────────────────────────────────── */
  --pub-shadow-sm:  0 1px 2px 0 rgba(15,23,42,0.06);
  --pub-shadow-md:  0 4px 6px -1px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.06);
  --pub-shadow-lg:  0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.05);
  --pub-shadow-xl:  0 20px 25px -5px rgba(15,23,42,0.08), 0 8px 10px -6px rgba(15,23,42,0.04);

  /* ── Transitions ───────────────────────────────────── */
  --pub-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --pub-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --pub-duration-fast:   100ms;
  --pub-duration-base:   200ms;
  --pub-duration-slow:   400ms;
  --pub-duration-slower: 600ms;

  /* ── Z-index ───────────────────────────────────────── */
  --pub-z-dropdown: 100;
  --pub-z-sticky:   200;
  --pub-z-overlay:  300;
  --pub-z-modal:    400;
  --pub-z-toast:    500;
}

/* ── Dark mode overrides ────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --pub-text:           var(--pub-slate-100);
    --pub-text-muted:     var(--pub-slate-400);
    --pub-border:         var(--pub-slate-700);
    --pub-surface:        var(--pub-slate-800);
    --pub-surface-raised: var(--pub-slate-700);
    --pub-bg:             var(--pub-slate-900);
    --pub-primary-subtle: var(--pub-blue-900);
  }
}