/* ============================================================
   ADOBE CONNECT — Design Tokens / CSS Custom Properties
   ============================================================ */

:root {

  /* ── Platform Colors ────────────────────────────────────── */
  --color-adobe-red:        #eb1c24;
  --color-adobe-red-dark:   #c41520;
  --color-adobe-red-light:  #ff3d44;
  --color-adobe-red-glow:   rgba(235, 28, 36, 0.25);

  /* ── Brand Tokens (overridden per-company by brand.config.js) ── */
  --brand-primary:       #eb1c24;
  --brand-primary-dark:  #c41520;
  --brand-primary-light: #ff3d44;
  --brand-primary-glow:  rgba(235, 28, 36, 0.25);
  --brand-primary-tint:  rgba(235, 28, 36, 0.10);
  --brand-primary-tint2: rgba(235, 28, 36, 0.20);

  /* ── Background Layers ──────────────────────────────────── */
  --color-bg-base:          #04090f;
  --color-bg-brand:         #060d18;
  --color-bg-surface:       #0c1526;
  --color-bg-card:          #111e33;
  --color-bg-input:         #0a1220;
  --color-bg-input-focus:   #0d1628;
  --color-bg-hover:         #162035;

  /* ── Text ───────────────────────────────────────────────── */
  --color-text-primary:     #eef2ff;
  --color-text-secondary:   #8b9cc8;
  --color-text-muted:       #4a5a80;
  --color-text-inverse:     #04090f;

  /* ── Borders ────────────────────────────────────────────── */
  --color-border:           rgba(255, 255, 255, 0.07);
  --color-border-hover:     rgba(255, 255, 255, 0.14);
  --color-border-focus:     var(--color-adobe-red);

  /* ── Semantic ───────────────────────────────────────────── */
  --color-success:          #22c55e;
  --color-success-bg:       rgba(34, 197, 94, 0.1);
  --color-error:            #ef4444;
  --color-error-bg:         rgba(239, 68, 68, 0.1);
  --color-warning:          #f59e0b;

  /* ── Gradients ──────────────────────────────────────────── */
  --gradient-brand:         linear-gradient(135deg, #04090f 0%, #0a1626 50%, #060d18 100%);
  --gradient-accent:        linear-gradient(135deg, var(--color-adobe-red), #ff6b35);
  --gradient-text:          linear-gradient(135deg, #eef2ff 0%, #a5b4fc 100%);
  --gradient-divider:       linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:      0.6875rem;   /* 11px */
  --text-sm:      0.8125rem;   /* 13px */
  --text-base:    0.9375rem;   /* 15px */
  --text-md:      1rem;        /* 16px */
  --text-lg:      1.125rem;    /* 18px */
  --text-xl:      1.375rem;    /* 22px */
  --text-2xl:     1.75rem;     /* 28px */
  --text-3xl:     2.25rem;     /* 36px */
  --text-4xl:     3rem;        /* 48px */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-base:    0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;

  /* ── Spacing Scale (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-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

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

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm:  0 2px 4px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.55);
  --shadow-xl:  0 16px 40px rgba(0,0,0,0.6);
  --shadow-2xl: 0 32px 64px rgba(0,0,0,0.7);
  --shadow-red: 0 0 32px var(--color-adobe-red-glow);

  /* ── Transitions ────────────────────────────────────────── */
  --ease-out-cubic:  cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   380ms;
  --duration-slower: 550ms;

  /* ── Z-Index Layers ─────────────────────────────────────── */
  --z-base:    0;
  --z-above:   1;
  --z-modal:   100;
  --z-toast:   200;
  --z-tooltip: 300;

  /* ── Layout ─────────────────────────────────────────────── */
  --brand-panel-width: 44%;
  --form-panel-width:  56%;
  --form-max-width:    420px;
  --input-height:      48px;
  --btn-height:        50px;

}