/*
 * Design tokens — the single source of truth for the visual language.
 *
 * Override any of these in a theme CSS file or via the team-settings
 * <style> block to rebrand the entire UI without touching components.
 *
 * Self-hosters: copy themes/default.css, change the values, and point
 * THEME_CSS at your file — or set individual tokens in admin.
 */

:root {
  /* ── Color: neutral scale ────────────────────────────────── */
  --color-white:       #ffffff;
  --color-gray-50:     #f8f9fa;
  --color-gray-100:    #f1f3f5;
  --color-gray-200:    #e9ecef;
  --color-gray-300:    #dee2e6;
  --color-gray-400:    #ced4da;
  --color-gray-500:    #adb5bd;
  --color-gray-600:    #868e96;
  --color-gray-700:    #495057;
  --color-gray-800:    #343a40;
  --color-gray-900:    #212529;

  /* ── Color: brand (override these in your theme) ─────────── */
  --color-primary:       #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #dbeafe;
  --color-primary-text:  #ffffff;
  /* Primary as text on --color-primary-light tints (badges, avatars,
     meeting dates).  Brand primaries often sit just under 4.5:1 there;
     the hover shade is the darker (light mode) / lighter (dark) step. */
  --color-primary-strong: var(--color-primary-hover);

  --color-secondary:       #475569;
  --color-secondary-hover: #334155;
  --color-secondary-light: #f1f5f9;
  --color-secondary-text:  #ffffff;
  /* Secondary as text on light grounds (e.g. .btn-secondary on
     --color-secondary-light).  Themes whose secondary is a bright
     accent must point this at a darker shade that keeps 4.5:1. */
  --color-secondary-strong: var(--color-secondary);

  /* ── Color: semantic ─────────────────────────────────────── */
  --color-success:       #16a34a;
  --color-success-light: #dcfce7;
  --color-success-text:  #052e16;

  --color-warning:       #ca8a04;
  --color-warning-light: #fef9c3;
  --color-warning-text:  #422006;

  --color-danger:        #dc2626;
  --color-danger-light:  #fee2e2;
  --color-danger-text:   #450a0a;

  --color-info:          #0284c7;
  --color-info-light:    #e0f2fe;
  --color-info-text:     #082f49;

  /* ── Color: surfaces ─────────────────────────────────────── */
  --color-bg:           var(--color-white);
  --color-bg-subtle:    var(--color-gray-50);
  --color-bg-muted:     var(--color-gray-100);
  --color-surface:      var(--color-white);
  --color-surface-raised: var(--color-white);
  --color-border:       var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);

  /* ── Color: text ─────────────────────────────────────────── */
  --color-text:         var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  /* Muted text must still meet WCAG AA (4.5:1) on every light ground it
     sits on — page, cards, --color-bg-muted, and --color-primary-light
     tints.  gray-500 (#adb5bd) is ~2:1 on white, so it is border-only. */
  --color-text-muted:   #5f666d;
  --color-text-inverse: var(--color-white);
  --color-link:         var(--color-primary);
  --color-link-hover:   var(--color-primary-hover);

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  /* 14px is the interface-text floor, including badges and metadata. */
  --text-xs:   0.875rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

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

  /* ── Spacing (4px base) ──────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Border radius ───────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-hard: var(--shadow-md);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:  72rem;
  --content-max:    48rem;
  --sidebar-width:  16rem;
  --control-min-size: 2.75rem;

  /* ── Transitions ─────────────────────────────────────────── */
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Focus ring ──────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--color-primary);

  /* ── Z-index scale ───────────────────────────────────────── */
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-modal:     40;
  --z-toast:     50;
}

/* ── Dark mode ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            var(--color-gray-900);
    --color-bg-subtle:     var(--color-gray-800);
    --color-bg-muted:      #2a2e33;
    --color-surface:       var(--color-gray-800);
    --color-surface-raised: var(--color-gray-700);
    --color-border:        var(--color-gray-700);
    --color-border-strong: var(--color-gray-600);

    --color-text:           var(--color-gray-100);
    --color-text-secondary: var(--color-gray-300);
    --color-text-muted:     var(--color-gray-400);
    --color-text-inverse:   var(--color-gray-900);

    --color-primary:       #60a5fa;
    --color-primary-hover: #93bbfd;
    --color-primary-light: #1e3a5f;
    --color-primary-text:  var(--color-gray-900);

    --color-secondary-light: #2a2e33;
    --color-secondary-strong: var(--color-gray-300);

    --color-success-light: #052e16;
    --color-success-text:  #bbf7d0;
    --color-warning-light: #422006;
    --color-warning-text:  #fef08a;
    --color-danger-light:  #450a0a;
    --color-danger-text:   #fecaca;
    --color-info-light:    #082f49;
    --color-info-text:     #bae6fd;

    --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  }
}

:root[data-theme="dark"] {
  --color-bg:            var(--color-gray-900);
  --color-bg-subtle:     var(--color-gray-800);
  --color-bg-muted:      #2a2e33;
  --color-surface:       var(--color-gray-800);
  --color-surface-raised: var(--color-gray-700);
  --color-border:        var(--color-gray-700);
  --color-border-strong: var(--color-gray-600);

  --color-text:           var(--color-gray-100);
  --color-text-secondary: var(--color-gray-300);
  --color-text-muted:     var(--color-gray-400);
  --color-text-inverse:   var(--color-gray-900);

  --color-primary:       #60a5fa;
  --color-primary-hover: #93bbfd;
  --color-primary-light: #1e3a5f;
  --color-primary-text:  var(--color-gray-900);

  --color-secondary-light: #2a2e33;
  --color-secondary-strong: var(--color-gray-300);

  --color-success-light: #052e16;
  --color-success-text:  #bbf7d0;
  --color-warning-light: #422006;
  --color-warning-text:  #fef08a;
  --color-danger-light:  #450a0a;
  --color-danger-text:   #fecaca;
  --color-info-light:    #082f49;
  --color-info-text:     #bae6fd;

  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
}