/**
 * AUTOMIFYA 2.0 — Design Tokens
 * ─────────────────────────────────────────────────────────────────────────────
 * Single source of truth for all design decisions.
 * Every value in the system derives from these tokens.
 *
 * Organization:
 *   1. Color System
 *   2. Typography
 *   3. Spacing Scale
 *   4. Border Radius
 *   5. Shadows & Glows
 *   6. Transitions & Easing
 *   7. Z-Index Scale
 *   8. Breakpoints (reference only — use in media queries)
 *   9. Layout
 *  10. AdSense Slot Dimensions
 *
 * RFC: RFC-004 · FINAL_ARCHITECTURE.md §3.2
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {

  /* ─── 1. COLOR SYSTEM ───────────────────────────────────────────────────── */

  /* Backgrounds — depth system (darkest to lightest) */
  --color-bg-base:     #080B18;   /* Page body — deepest layer            */
  --color-bg-2:        #0D1121;   /* Elevated surfaces                    */
  --color-bg-3:        #111827;   /* Secondary panels, hover states       */
  --color-bg-card:     #131929;   /* Primary card background              */
  --color-bg-card-2:   #1a2236;   /* Elevated card / hover state          */
  --color-bg-glass:    rgba(13, 17, 33, 0.72); /* Glassmorphism overlays  */
  --color-bg-overlay:  rgba(8, 11, 24, 0.85);  /* Modal / drawer overlays */

  /* Borders */
  --color-border:      #1e2d47;
  --color-border-2:    #243352;
  --color-border-focus: rgba(240, 98, 42, 0.6);
  --color-border-glow: rgba(99, 102, 241, 0.3);

  /* Text */
  --color-text:        #e8edf5;   /* Primary text                         */
  --color-text-2:      #9aa5b8;   /* Secondary / supporting text          */
  --color-text-3:      #6b7a95;   /* Muted / placeholder text             */
  --color-text-inv:    #080B18;   /* Text on light backgrounds            */
  --color-text-link:   #818cf8;   /* Hyperlinks                           */

  /* Brand Gradient — Orange → Magenta → Purple */
  --color-grad-1:      #F0622A;
  --color-grad-2:      #C7257E;
  --color-grad-3:      #8B2FC9;

  /* Semantic Colors */
  --color-success:     #10b981;
  --color-success-bg:  rgba(16, 185, 129, 0.1);
  --color-error:       #ef4444;
  --color-error-bg:    rgba(239, 68, 68, 0.1);
  --color-warning:     #f59e0b;
  --color-warning-bg:  rgba(245, 158, 11, 0.1);
  --color-info:        #6366f1;
  --color-info-bg:     rgba(99, 102, 241, 0.1);

  /* Accent Colors — used sparingly */
  --color-accent-indigo: #6366f1;
  --color-accent-cyan:   #06b6d4;
  --color-accent-purple: #a855f7;

  /* Composite Gradient Strings */
  --gradient-brand:    linear-gradient(135deg, #F0622A 0%, #C7257E 50%, #8B2FC9 100%);
  --gradient-brand-h:  linear-gradient(90deg, #F0622A 0%, #C7257E 50%, #8B2FC9 100%);
  --gradient-subtle:   linear-gradient(135deg, rgba(240,98,42,.12) 0%, rgba(139,47,201,.12) 100%);
  --gradient-hero-glow: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(139,47,201,0.15) 0%, transparent 70%);
  --gradient-card:     linear-gradient(145deg, rgba(30,45,71,.6) 0%, rgba(13,17,33,.4) 100%);


  /* ─── 2. TYPOGRAPHY ─────────────────────────────────────────────────────── */

  --font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                 'Courier New', monospace;

  /* Type Scale — Major Third (1.25× ratio) */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */
  --text-5xl:   3rem;       /*  48px */
  --text-6xl:   3.75rem;    /*  60px */
  --text-7xl:   4.5rem;     /*  72px */

  /* Font Weights */
  --fw-light:   300;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line Heights */
  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   1.75;

  /* Letter Spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.025em;
  --ls-wider:   0.05em;
  --ls-label:   0.08em;    /* For UPPERCASE labels/eyebrows */


  /* ─── 3. SPACING SCALE (8px base) ──────────────────────────────────────── */

  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;
  --space-32:   128px;
  --space-40:   160px;
  --space-48:   192px;


  /* ─── 4. BORDER RADIUS ──────────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;


  /* ─── 5. SHADOWS & GLOWS ────────────────────────────────────────────────── */

  --shadow-xs:    0 1px 2px  rgba(0, 0, 0, 0.3);
  --shadow-sm:    0 1px 4px  rgba(0, 0, 0, 0.4);
  --shadow:       0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-md:    0 6px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:    0 16px 64px rgba(0, 0, 0, 0.7);
  --shadow-2xl:   0 24px 80px rgba(0, 0, 0, 0.75);

  /* Brand glows */
  --glow-brand:   0 0 40px  rgba(240, 98,  42,  0.20);
  --glow-purple:  0 0 40px  rgba(139, 47,  201, 0.20);
  --glow-cyan:    0 0 32px  rgba(6,   182, 212, 0.20);
  --glow-card:    0 0 0 1px var(--color-border), var(--shadow);


  /* ─── 6. TRANSITIONS & EASING ──────────────────────────────────────────── */

  /* Durations */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    220ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;
  --duration-slowest: 700ms;

  /* Easings */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);   /* Material standard  */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);       /* Accelerate         */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);       /* Decelerate         */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* Springy overshoot */
  --ease-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1); /* Browser default    */

  /* Composite transition shorthands */
  --t-fast:   var(--duration-fast)   var(--ease-default);
  --t-base:   var(--duration-base)   var(--ease-default);
  --t-slow:   var(--duration-slow)   var(--ease-default);
  --t-spring: var(--duration-slower) var(--ease-spring);


  /* ─── 7. Z-INDEX SCALE ──────────────────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      300;
  --z-mifya:    400;
  --z-modal:    500;
  --z-toast:    600;
  --z-top:      999;


  /* ─── 8. BREAKPOINTS (reference — use in @media queries) ───────────────── */
  /* xs:  < 480px  (small mobile)   */
  /* sm:    480px  (mobile)         */
  /* md:    768px  (tablet)         */
  /* lg:   1024px  (laptop)         */
  /* xl:   1280px  (desktop)        */
  /* 2xl:  1536px  (wide desktop)   */


  /* ─── 9. LAYOUT ─────────────────────────────────────────────────────────── */

  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;
  --container-fluid: 100%;

  --container-padding-x:     clamp(1rem, 5vw, 2rem);
  --section-padding-y:       clamp(4rem, 8vw, 7rem);
  --section-padding-y-sm:    clamp(2.5rem, 5vw, 4rem);

  /* Nav */
  --nav-height:         68px;
  --nav-height-mobile:  60px;

  /* MIFYA widget */
  --mifya-toggle-size:  56px;
  --mifya-panel-width:  340px;
  --mifya-panel-height: 460px;
  --mifya-offset:       24px;


  /* ─── 10. ADSENSE SLOT DIMENSIONS ──────────────────────────────────────── */
  /* Pre-defined dimensions prevent CLS when ads activate.                   */
  /* All slots are inactive (display: none) until AdSense is approved.       */

  --ad-leaderboard-w:   728px;
  --ad-leaderboard-h:    90px;
  --ad-rectangle-w:     336px;
  --ad-rectangle-h:     280px;
  --ad-halfpage-w:      300px;
  --ad-halfpage-h:      600px;
  --ad-mobile-banner-w: 320px;
  --ad-mobile-banner-h:  50px;

}