/* ==========================================================================
   RAMP Design Token System  —  Figma rebrand (contract: ramp2-figma-redesign-01)
   Shared across all themes (admin, client, public). Single source of truth.
   Import this file BEFORE theme-specific overrides.

   Visual source: Figma "RAMP x Design" handoff.
   Font: Plus Jakarta Sans. Primary green #00F1A0 (CTA = green bg + black text).
   Square/clean geometry, restrained rounding, large cards ~20px radius.
   ========================================================================== */

:root {
  /* ===== BRAND PALETTE (Figma canonical) ===== */
  --brand-green: #00F1A0;      /* primary / CTA */
  --brand-green-ink: #000000;  /* text on green CTA */
  --brand-yellow: #FFDB32;
  --brand-red: #FB4A50;
  --brand-purple: #B758EA;
  --brand-blue: #03AAFB;
  --brand-black: #000000;
  --brand-near-black: #121416;
  --brand-dark-purple: #382E53;
  --brand-gray: #737373;
  --brand-dark-gray: #606060;
  --brand-border: #E8E8E8;
  --brand-section: #F5F5F5;    /* pale-gray marketing section bg */
  --brand-white: #FFFFFF;

  /* ===== SPACING SCALE ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;           /* Figma large content cards / screenshots */
  --radius-full: 9999px;

  /* ===== TYPOGRAPHY — FONT FAMILIES ===== */
  --font-sans: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ===== TYPOGRAPHY — SIZE SCALE (6 named steps) ===== */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: 48px;
  --text-hero: 52px;           /* Figma marketing H1 ~50-54px ExtraBold */

  /* ===== TYPOGRAPHY — WEIGHT SCALE (Plus Jakarta: Light..ExtraBold) ===== */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ===== TYPOGRAPHY — LINE HEIGHT ===== */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;

  /* ===== FOCUS RING ===== */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ===== FORM SPACING ===== */
  --form-label-gap: 6px;
  --form-field-gap: 16px;
  --form-section-gap: 24px;
  --form-button-gap: 24px;

  /* ===== SHADOWS (restrained — no glassmorphism) ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);

  /* ===== Z-INDEX SCALE ===== */
  --z-dropdown: 30;
  --z-sticky: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-debug: 99999;
}

/* ==========================================================================
   THEME: PUBLIC / MARKETING (LIGHT — Figma primary surface)
   White base, black ink, green CTA, pale-gray sections.
   Applied via data-theme="public" on <html>
   ========================================================================== */

[data-theme="public"] {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: var(--brand-section);   /* #F5F5F5 */
  --color-section: var(--brand-section);
  --color-border: var(--brand-border);         /* #E8E8E8 */
  --color-text: var(--brand-near-black);       /* #121416 */
  --color-text-muted: var(--brand-gray);       /* #737373 */
  --color-text-dim: #9A9A9A;
  --color-primary: var(--brand-green);
  --color-primary-ink: var(--brand-green-ink); /* black text on green */
  --color-primary-hover: #00D48E;
  --color-success: var(--brand-green);
  --color-success-hover: #00D48E;
  --color-warning: var(--brand-yellow);
  --color-warning-hover: #E6C415;
  --color-error: var(--brand-red);
  --color-error-hover: #E23A40;
  --color-info: var(--brand-blue);
  --color-info-hover: #0295DE;
  --color-accent-purple: var(--brand-purple);
  --focus-ring-color: var(--brand-green);

  --color-hover-bg: rgba(0, 241, 160, 0.08);
  --color-disabled-opacity: 0.5;
  --color-input-bg: #FFFFFF;
  --color-input-border: var(--brand-border);
  --color-input-border-focus: var(--brand-green);
  --color-input-border-error: var(--brand-red);
  --color-input-placeholder: var(--brand-gray);
}

/* ==========================================================================
   THEME: ADMIN (DARK — operator surface, Figma brand palette)
   Near-black base, green primary, dense application layout.
   Applied via data-theme="admin" on <html>
   ========================================================================== */

[data-theme="admin"] {
  --color-bg: var(--brand-near-black);         /* #121416 */
  --color-surface: #1A1D1F;
  --color-surface-alt: #22262A;
  --color-section: #1A1D1F;
  --color-border: #2E3338;
  --color-text: #F2F4F5;
  --color-text-muted: #A0A6AC;
  --color-text-dim: #6C7278;
  --color-primary: var(--brand-green);
  --color-primary-ink: var(--brand-green-ink);
  --color-primary-hover: #33F4B5;
  --color-success: var(--brand-green);
  --color-success-hover: #33F4B5;
  --color-warning: var(--brand-yellow);
  --color-warning-hover: #E6C415;
  --color-error: var(--brand-red);
  --color-error-hover: #E23A40;
  --color-info: var(--brand-blue);
  --color-info-hover: #0295DE;
  --color-accent-purple: var(--brand-purple);
  --focus-ring-color: var(--brand-green);

  --color-hover-bg: rgba(0, 241, 160, 0.10);
  --color-disabled-opacity: 0.4;
  --color-input-bg: #1A1D1F;
  --color-input-border: #2E3338;
  --color-input-border-focus: var(--brand-green);
  --color-input-border-error: var(--brand-red);
  --color-input-placeholder: #6C7278;
}

/* ==========================================================================
   THEME: CLIENT (DARK — intelligence portal, Figma brand palette)
   Near-black base, green primary, denser than marketing composition.
   Applied via data-theme="client" on <html>
   ========================================================================== */

[data-theme="client"] {
  --color-bg: var(--brand-near-black);         /* #121416 */
  --color-surface: #1A1D1F;
  --color-surface-alt: #22262A;
  --color-section: #1A1D1F;
  --color-border: #2E3338;
  --color-text: #FFFFFF;
  --color-text-muted: #A0A6AC;
  --color-text-dim: #6C7278;
  --color-primary: var(--brand-green);
  --color-primary-ink: var(--brand-green-ink);
  --color-primary-hover: #33F4B5;
  --color-success: var(--brand-green);
  --color-success-hover: #33F4B5;
  --color-warning: var(--brand-yellow);
  --color-warning-hover: #E6C415;
  --color-error: var(--brand-red);
  --color-error-hover: #E23A40;
  --color-info: var(--brand-blue);
  --color-info-hover: #0295DE;
  --color-accent-purple: var(--brand-purple);
  --focus-ring-color: var(--brand-green);

  --color-hover-bg: rgba(0, 241, 160, 0.10);
  --color-disabled-opacity: 0.4;
  --color-input-bg: #1A1D1F;
  --color-input-border: #2E3338;
  --color-input-border-focus: var(--brand-green);
  --color-input-border-error: var(--brand-red);
  --color-input-placeholder: #A0A6AC;

  /* ----- Client-portal legacy aliases (keep existing class names working) -----
     client-tokens.css + client/* templates reference these names directly.
     Re-point them at the Figma palette instead of the old orange identity so
     no second system is introduced and existing markup restyles automatically. */
  --color-orange: var(--brand-green);          /* was #FF6B35 — now brand green */
  --color-orange-light: var(--brand-green-hover, #33F4B5);
  --color-white: #FFFFFF;
  --color-muted: #A0A6AC;
  --color-red: var(--brand-red);
  --color-amber: var(--brand-yellow);
  --color-green: var(--brand-green);
  --color-phase1: var(--brand-gray);
  --color-phase2: var(--brand-green);
  --color-phase3: var(--brand-blue);
  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-sm);
  --radius-pill: var(--radius-full);
}