/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — MKL Performance
   Single source of truth for all design values.
   Import this file FIRST, before all other stylesheets.
   resources/css/tokens.css
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ════════════════════════════════════════════
     COLORS
     ════════════════════════════════════════════ */

  /* Backgrounds */
  --color-bg:         #000;
  --color-bg-subtle:  #0a0a0a;

  /* Text — opacity scale */
  --color-text-primary:      #fff;
  --color-text-agree:        rgba(255, 255, 255, 0.75);
  --color-text-secondary:    rgba(255, 255, 255, 0.68); /* primary body copy */
  --color-text-soft:         rgba(255, 255, 255, 0.65); /* hero eyebrow, hints */
  --color-text-dim:          rgba(255, 255, 255, 0.60); /* taglines, small text */
  --color-text-muted:        rgba(255, 255, 255, 0.55); /* descriptions */
  --color-text-faded:        rgba(255, 255, 255, 0.50); /* social desc, contact desc */
  --color-text-low:          rgba(255, 255, 255, 0.45); /* scroll hints */
  --color-text-faint:        rgba(255, 255, 255, 0.40); /* channel labels */
  --color-text-ghost:        rgba(255, 255, 255, 0.30); /* copyright, fine print */
  --color-text-placeholder:  rgba(255, 255, 255, 0.25); /* form placeholders */

  /* Status */
  --color-success:  #4ade80;  /* form submission success */
  --color-error:    #f87171;  /* form submission error */

  /* Brand */
  --color-accent:            #E8510A;
  --color-accent-hover:      #ff6422;
  --color-accent-secondary:  #E8C10A;   /* footer developer link */
  --color-google-star:       #FBBC05;

  /* Borders */
  --color-border-subtle:  rgba(255, 255, 255, 0.07);
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-soft:    rgba(255, 255, 255, 0.10);
  --color-border-mid:     rgba(255, 255, 255, 0.12);
  --color-border-strong:  rgba(255, 255, 255, 0.15);
  --color-border-bright:  rgba(255, 255, 255, 0.25);
  --color-border-accent:  rgba(232, 81, 10, 0.40);

  /* Scrims — black overlays used in gradients */
  --scrim-97: rgba(0, 0, 0, 0.97);
  --scrim-95: rgba(0, 0, 0, 0.95);
  --scrim-94: rgba(0, 0, 0, 0.94);
  --scrim-92: rgba(0, 0, 0, 0.92);
  --scrim-90: rgba(0, 0, 0, 0.90);
  --scrim-88: rgba(0, 0, 0, 0.88);
  --scrim-85: rgba(0, 0, 0, 0.85);
  --scrim-80: rgba(0, 0, 0, 0.80);
  --scrim-75: rgba(0, 0, 0, 0.75);
  --scrim-70: rgba(0, 0, 0, 0.70);
  --scrim-65: rgba(0, 0, 0, 0.65);
  --scrim-60: rgba(0, 0, 0, 0.60);
  --scrim-55: rgba(0, 0, 0, 0.55);
  --scrim-50: rgba(0, 0, 0, 0.50);
  --scrim-45: rgba(0, 0, 0, 0.45);
  --scrim-40: rgba(0, 0, 0, 0.40);
  --scrim-35: rgba(0, 0, 0, 0.35);
  --scrim-30: rgba(0, 0, 0, 0.30);
  --scrim-20: rgba(0, 0, 0, 0.20);
  --scrim-15: rgba(0, 0, 0, 0.15);
  --scrim-12: rgba(0, 0, 0, 0.12);
  --scrim-10: rgba(0, 0, 0, 0.10);
  --scrim-05: rgba(0, 0, 0, 0.05);
  --scrim-00: transparent;

  /* Surfaces */
  --color-surface:              rgba(255, 255, 255, 0.02);
  --color-surface-low:          rgba(255, 255, 255, 0.03);
  --color-surface-mid:          rgba(255, 255, 255, 0.05);
  --color-surface-high:         rgba(255, 255, 255, 0.06);
  --color-surface-hover:        rgba(255, 255, 255, 0.08);
  --color-surface-accent:       rgba(232, 81, 10, 0.06);
  --color-surface-accent-mid:   rgba(232, 81, 10, 0.15);
  --color-surface-accent-strong: rgba(232, 81, 10, 0.20);

  /* ════════════════════════════════════════════
     SPACING
     Tokens are named by their pixel value.
     Semantic aliases map to the most common rhythm values.
     ════════════════════════════════════════════ */

  --space-2:   2px;
  --space-4:   4px;
  --space-5:   5px;
  --space-6:   6px;
  --space-8:   8px;
  --space-10:  10px;
  --space-12:  12px;
  --space-14:  14px;
  --space-16:  16px;
  --space-18:  18px;
  --space-20:  20px;
  --space-22:  22px;
  --space-24:  24px;
  --space-26:  26px;
  --space-28:  28px;
  --space-32:  32px;
  --space-36:  36px;
  --space-38:  38px;
  --space-40:  40px;
  --space-44:  44px;
  --space-48:  48px;
  --space-52:  52px;
  --space-56:  56px;
  --space-60:  60px;
  --space-64:  64px;
  --space-70:  70px;
  --space-72:  72px;
  --space-80:  80px;
  --space-100: 100px;
  --space-110: 110px;
  --space-120: 120px;
  --space-140: 140px;
  --space-160: 160px;

  /* Semantic aliases (CLAUDE.md required names) */
  --space-xs:  var(--space-8);   /*  8px */
  --space-sm:  var(--space-12);  /* 12px */
  --space-md:  var(--space-16);  /* 16px */
  --space-lg:  var(--space-24);  /* 24px */
  --space-xl:  var(--space-40);  /* 40px */
  --space-2xl: var(--space-60);  /* 60px */
  --space-3xl: var(--space-80);  /* 80px */
  --space-4xl: var(--space-100); /* 100px */

  /* ════════════════════════════════════════════
     TYPOGRAPHY
     ════════════════════════════════════════════ */

  /* Fixed sizes */
  --text-xs:    10px;  /* smallest labels, scroll hints */
  --text-label: 11px;  /* eyebrows, uppercase tags */
  --text-cap:   12px;  /* captions, copyright, fine print */
  --text-input: 15px;  /* form input fields */
  --text-body:  16px;  /* long-form body text (policy) */

  /* Fluid — buttons */
  --text-btn:  clamp(13px, 1.4vw, 16px);

  /* Fluid — body */
  --text-sm:   clamp(13px, 1.1vw, 15px); /* secondary body, card descriptions */
  --text-base: clamp(14px, 1.2vw, 17px); /* primary body copy */

  /* Fluid — headings (ascending scale) */
  --text-lg:       clamp(18px, 1.8vw, 26px);  /* sub-headings, panel titles */
  --text-xl:       clamp(18px, 1.8vw, 28px);  /* card h3, section sub-titles */
  --text-xl-wide:  clamp(20px, 2vw,   28px);  /* contact channel values */
  --text-2xl:      clamp(36px, 4vw,   60px);  /* contact left h2 */
  --text-2xl-wide: clamp(36px, 4vw,   64px);  /* com-title, dif h2 */
  --text-3xl:      clamp(36px, 5vw,   72px);  /* exp, video, policy, footer tagline */
  --text-4xl:      clamp(48px, 6vw,   96px);  /* logo h1, adrian h2 */
  --text-5xl:      clamp(52px, 7.5vw, 116px); /* cinematic slide title */
  --text-6xl:      clamp(52px, 8vw,   120px); /* srv-hero, mkl-banner, 404 h1 */
  --text-hero:     clamp(50px, 10vw,  140px); /* preg-h2 desktop, main hero */

  /* Mobile overrides — valori mai mici decât desktop pentru ecran îngust */
  --text-mobile-hero: clamp(36px, 10vw,  56px); /* h1 hero pe mobile */
  --text-mobile-h1:   clamp(36px, 10.5vw, 58px); /* titluri secțiuni pe mobile */
  --text-mobile-card: clamp(26px, 7.5vw, 40px);  /* card titles pe mobile */
  --text-mobile-h3:   clamp(22px, 6vw,   32px);  /* card h3 pe mobile */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* ════════════════════════════════════════════
     Z-INDEX
     ════════════════════════════════════════════ */

  --z-base:     0;
  --z-overlay:  1;
  --z-content:  2;
  --z-raised:   3;
  --z-panel:    4;
  --z-sticky:   5;
  --z-floating: 6;
  --z-nav:      10;
  --z-modal:    9999;

  /* ════════════════════════════════════════════
     TRANSITIONS
     ════════════════════════════════════════════ */

  --ease-fast:   0.2s ease;
  --ease-base:   0.25s ease;
  --ease-slow:   0.4s ease;
  --ease-spring: 0.7s cubic-bezier(0.77, 0, 0.18, 1);
  --ease-smooth: 0.7s cubic-bezier(0.16, 1, 0.3, 1);

  /* ════════════════════════════════════════════
     BORDER RADIUS
     ════════════════════════════════════════════ */

  --radius-xs:   4px;
  --radius-sm:   16px;
  --radius-full: 50%;
  --radius-pill: 50px;

  /* ════════════════════════════════════════════
     LAYOUT
     ════════════════════════════════════════════ */

  --max-content: 1200px;  /* primary content max-width */
  --max-policy:  1000px;  /* policy/article pages */
  --max-insta:   1080px;  /* instagram grid */
  --max-brands:  1400px;  /* brand carousel */
  --max-narrow:   600px;  /* narrow content columns, 404 paragraph */
  --max-actions:  280px;  /* mobile action column max-width */
  --pad-section: var(--space-80);  /* desktop horizontal padding for sections */
  --pad-nav:     var(--space-56);  /* desktop nav horizontal padding */

  /* ════════════════════════════════════════════
     BREAKPOINTS
     Note: CSS custom properties cannot be used inside
     @media at-rules in standard CSS. These are reference
     values only. In @media rules, write the px value
     directly with a comment: e.g.
       @media (max-width: 768px) { } /* --bp-mobile */
  /* ════════════════════════════════════════════ */

  --bp-mobile: 768px; /* reference only */
  --bp-small:  600px; /* reference only */
}