/* ============================================================
   Portal Design Tokens
   Light theme, modern-minimal, trace.rocks-inspired blues.
   All custom properties scoped to :root for global use.
   Token names prefixed "portal-" per CLAUDE.local.md convention.
   ============================================================ */

:root {
  /* ---------- Color: Brand (Blue) ---------- */
  --portal-color-brand-50:  #eff6ff;
  --portal-color-brand-100: #dbeafe;
  --portal-color-brand-200: #bfdbfe;
  --portal-color-brand-300: #93c5fd;
  --portal-color-brand-400: #60a5fa;
  --portal-color-brand-500: #3b82f6;
  --portal-color-brand-600: #2563eb;   /* primary */
  --portal-color-brand-700: #1d4ed8;   /* primary hover */
  --portal-color-brand-800: #1e40af;
  --portal-color-brand-900: #1e3a8a;

  /* ---------- Color: Neutral ---------- */
  --portal-color-bg:           #fafbfc;
  --portal-color-bg-subtle:    #f4f6f9;
  --portal-color-surface:      #ffffff;
  --portal-color-surface-hover:#f8fafc;

  --portal-color-text:           #0f172a;
  --portal-color-text-secondary: #475569;
  --portal-color-text-tertiary:  #94a3b8;
  --portal-color-text-on-brand:  #ffffff;

  --portal-color-border:       #e2e8f0;
  --portal-color-border-hover: #cbd5e1;
  --portal-color-border-focus: var(--portal-color-brand-500);

  /* ---------- Color: Status ---------- */
  --portal-color-success:        #10b981;
  --portal-color-success-soft:   #d1fae5;
  --portal-color-success-text:   #047857;
  --portal-color-error:          #ef4444;
  --portal-color-error-soft:     #fee2e2;
  --portal-color-error-text:     #b91c1c;
  --portal-color-warning:        #f59e0b;
  --portal-color-warning-soft:   #fef3c7;
  --portal-color-warning-text:   #b45309;

  /* ---------- Spacing ---------- */
  --portal-space-3xs: 0.125rem;  /*  2px */
  --portal-space-2xs: 0.25rem;   /*  4px */
  --portal-space-xs:  0.5rem;    /*  8px */
  --portal-space-sm:  0.75rem;   /* 12px */
  --portal-space-md:  1rem;      /* 16px */
  --portal-space-lg:  1.5rem;    /* 24px */
  --portal-space-xl:  2rem;      /* 32px */
  --portal-space-2xl: 3rem;      /* 48px */
  --portal-space-3xl: 4rem;      /* 64px */
  --portal-space-4xl: 6rem;      /* 96px */

  /* ---------- Radius ---------- */
  --portal-radius-xs:   4px;
  --portal-radius-sm:   6px;
  --portal-radius-md:   10px;
  --portal-radius-lg:   16px;
  --portal-radius-xl:   24px;
  --portal-radius-pill: 9999px;

  /* ---------- Typography ---------- */
  --portal-font-family-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --portal-font-family-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

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

  --portal-font-weight-regular: 400;
  --portal-font-weight-medium:  500;
  --portal-font-weight-semibold: 600;
  --portal-font-weight-bold:    700;

  --portal-line-height-tight:   1.2;
  --portal-line-height-base:    1.5;
  --portal-line-height-relaxed: 1.7;

  --portal-letter-spacing-tight: -0.02em;
  --portal-letter-spacing-base:   0;
  --portal-letter-spacing-wide:   0.02em;

  /* ---------- Shadow ---------- */
  --portal-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --portal-shadow-sm:
    0 1px 2px 0 rgba(15, 23, 42, 0.04),
    0 1px 3px 0 rgba(15, 23, 42, 0.05);
  --portal-shadow-md:
    0 2px 4px -1px rgba(15, 23, 42, 0.04),
    0 4px 6px -1px rgba(15, 23, 42, 0.06);
  --portal-shadow-lg:
    0 4px 6px -2px rgba(15, 23, 42, 0.05),
    0 10px 15px -3px rgba(15, 23, 42, 0.08);
  --portal-shadow-xl:
    0 10px 20px -5px rgba(15, 23, 42, 0.08),
    0 20px 25px -5px rgba(15, 23, 42, 0.1);
  --portal-shadow-focus:
    0 0 0 3px rgba(37, 99, 235, 0.18);

  /* ---------- Transition ---------- */
  --portal-transition-fast: 120ms ease;
  --portal-transition-base: 200ms ease;
  --portal-transition-slow: 320ms ease;

  /* ---------- Layout ---------- */
  --portal-content-max-width: 1120px;
  --portal-card-max-width:    560px;
  --portal-card-max-width-wide: 720px;

  /* ---------- Z-index ---------- */
  --portal-z-base:    1;
  --portal-z-overlay: 10;
  --portal-z-toast:   100;
  --portal-z-modal:   1000;
}