/* ============================================================
   ARTIFIC TECHNOLOGIES — CSS DESIGN SYSTEM VARIABLES
   Brand: Coral-Red (#F05538) → Purple-Magenta (#C0399C)
   ============================================================ */

:root {
  /* ── Brand Colors ────────────────────────────── */
  --color-primary:        #F05538;
  --color-primary-dark:   #D4441E;
  --color-primary-light:  #FF7A5C;
  --color-secondary:      #C0399C;
  --color-secondary-dark: #9A2D7D;
  --color-secondary-light:#D85CB8;

  /* ── Brand Gradients ─────────────────────────── */
  --gradient-brand:         linear-gradient(135deg, #F05538 0%, #C0399C 100%);
  --gradient-brand-h:       linear-gradient(90deg, #F05538 0%, #C0399C 100%);
  --gradient-brand-reverse: linear-gradient(135deg, #C0399C 0%, #F05538 100%);
  --gradient-brand-soft:    linear-gradient(135deg, rgba(240,85,56,0.08) 0%, rgba(192,57,156,0.08) 100%);
  --gradient-hero:          linear-gradient(135deg, #F8F9FF 0%, #FFF0FC 50%, #FFF5F2 100%);
  --gradient-dark-hero:     linear-gradient(135deg, #0D0F14 0%, #14102A 50%, #1A0F20 100%);
  --gradient-mesh:          radial-gradient(ellipse 80% 80% at 20% 20%, rgba(240,85,56,0.12) 0%, transparent 60%),
                            radial-gradient(ellipse 60% 60% at 80% 10%, rgba(192,57,156,0.10) 0%, transparent 60%),
                            radial-gradient(ellipse 70% 70% at 60% 80%, rgba(240,85,56,0.06) 0%, transparent 60%);

  /* ── Neutral / Background ────────────────────── */
  --color-white:        #FFFFFF;
  --color-bg:           #FFFFFF;
  --color-bg-soft:      #F8F9FC;
  --color-bg-card:      #FFFFFF;
  --color-bg-glass:     rgba(255, 255, 255, 0.7);
  --color-bg-glass-dark:rgba(13, 15, 20, 0.7);
  --color-border:       #E8EAF0;
  --color-border-light: #F2F3F8;

  /* ── Dark Surfaces ───────────────────────────── */
  --color-dark:         #0D0F14;
  --color-dark-surface: #141720;
  --color-dark-card:    #1C2030;
  --color-dark-border:  #2A2F45;
  --color-dark-muted:   #3A4060;

  /* ── Text Colors ─────────────────────────────── */
  --color-text:           #1A1D2E;
  --color-text-secondary: #4B5563;
  --color-text-muted:     #9CA3AF;
  --color-text-inverse:   #FFFFFF;

  /* ── Semantic Colors ─────────────────────────── */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;

  /* ── Typography ──────────────────────────────── */
  --font-sans:    'Urbanist', sans-serif;
  --font-display: 'Urbanist', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── Type Scale ──────────────────────────────── */
  --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 */
  --text-8xl:  6rem;      /* 96px */

  /* ── Font Weights ────────────────────────────── */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  /* ── Line Heights ────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* ── Letter Spacing ──────────────────────────── */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ── Spacing Scale ───────────────────────────── */
  --space-px:  1px;
  --space-0-5: 0.125rem; /* 2px */
  --space-1:   0.25rem;  /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2:   0.5rem;   /* 8px */
  --space-2-5: 0.625rem; /* 10px */
  --space-3:   0.75rem;  /* 12px */
  --space-3-5: 0.875rem; /* 14px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-7:   1.75rem;  /* 28px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-14:  3.5rem;   /* 56px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-28:  7rem;     /* 112px */
  --space-32:  8rem;     /* 128px */
  --space-40:  10rem;    /* 160px */
  --space-48:  12rem;    /* 192px */

  /* ── Border Radius ───────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-3xl:  48px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:         0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:         0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl:         0 16px 64px rgba(0, 0, 0, 0.16);
  --shadow-2xl:        0 24px 80px rgba(0, 0, 0, 0.20);
  --shadow-glow:       0 0 40px rgba(240, 85, 56, 0.25);
  --shadow-glow-lg:    0 0 80px rgba(240, 85, 56, 0.18);
  --shadow-glow-purple:0 0 40px rgba(192, 57, 156, 0.25);
  --shadow-card:       0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 12px 48px rgba(0, 0, 0, 0.14);
  --shadow-inset:      inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ── Transitions ─────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ───────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   250;
  --z-modal:     300;
  --z-toast:     400;

  /* ── Container Widths ────────────────────────── */
  --container-xs:      480px;
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1280px;
  --container-2xl:     1400px;
  --container-padding: 1.5rem;

  /* ── Header Height ───────────────────────────── */
  --header-height: 72px;
  --header-height-scrolled: 64px;
}

/* ── Dark Mode Token Overrides ────────────────── */
[data-theme="dark"] {
  --color-bg:           #0D0F14;
  --color-bg-soft:      #141720;
  --color-bg-card:      #1C2030;
  --color-bg-glass:     rgba(13, 15, 20, 0.75);
  --color-border:       #2A2F45;
  --color-border-light: #1E2438;
  --color-text:         #F0F4FF;
  --color-text-secondary: #A8B4CC;
  --color-text-muted:   #6B7A99;
  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.40);
  --shadow-card-hover:  0 12px 48px rgba(0, 0, 0, 0.50);
  --gradient-hero:      linear-gradient(135deg, #0D0F14 0%, #14102A 50%, #1A0F20 100%);
}