/**
 * 3D50.com — Design System Variables
 * Aesthetic: "Dark Precision" — Luxury × Editorial
 * Tone: obsidian base, amber accent, editorial typography
 *
 * DFII Score: 13/15
 * Differentiation: High-contrast amber on near-black,
 * paired with Syne display font — reads as premium creative platform.
 */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {
  /* ── Color Palette ────────────────────────────── */
  --color-bg:          #09090b;        /* zinc-950 — near-black canvas */
  --color-bg-elevated: #111113;        /* slightly lifted surface */
  --color-bg-card:     #18181b;        /* zinc-900 — card background */
  --color-bg-card-hover: #1e1e21;      /* card hover state */
  --color-bg-input:    #141416;        /* input field background */
  --color-border:      rgba(255,255,255,0.07);  /* subtle borders */
  --color-border-focus:rgba(245,158,11,0.5);    /* amber border on focus */

  /* Amber Accent — the signature color */
  --color-accent:         #F59E0B;     /* amber-500 */
  --color-accent-bright:  #FBBF24;    /* amber-400 — hover */
  --color-accent-dim:     #B45309;    /* amber-700 — pressed */
  --color-accent-bg:      rgba(245,158,11,0.08); /* amber tinted surface */
  --color-accent-border:  rgba(245,158,11,0.25); /* amber border */

  /* Text Hierarchy */
  --color-text-primary:   #F4F4F5;    /* zinc-100 */
  --color-text-secondary: #A1A1AA;    /* zinc-400 */
  --color-text-muted:     #71717A;    /* zinc-500 */
  --color-text-inverse:   #09090b;    /* for dark text on accent */

  /* Semantic Colors */
  --color-success:        #10B981;    /* emerald-500 */
  --color-success-bg:     rgba(16,185,129,0.1);
  --color-danger:         #EF4444;    /* red-500 */
  --color-danger-bg:      rgba(239,68,68,0.1);
  --color-warning:        #F59E0B;    /* amber-500 */
  --color-info:           #3B82F6;    /* blue-500 */
  --color-info-bg:        rgba(59,130,246,0.1);

  /* Stars Rating */
  --color-star-filled:    #FBBF24;
  --color-star-empty:     #3F3F46;

  /* ── Typography ───────────────────────────────── */
  --font-display: 'Syne', system-ui, sans-serif;      /* headers, product titles */
  --font-body:    'DM Sans', system-ui, sans-serif;   /* body text, UI */
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale (modular 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-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-extrabold:800;

  --line-height-tight:  1.15;
  --line-height-snug:   1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed:1.75;

  /* ── Spacing (8px base unit) ──────────────────── */
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */

  /* ── Border Radius ───────────────────────────── */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:     0 16px 48px rgba(0,0,0,0.7);
  --shadow-accent: 0 0 24px rgba(245,158,11,0.15);  /* amber glow */
  --shadow-card:   0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px var(--color-border);

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

  /* ── Layout ──────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --nav-height:     68px;
  --sidebar-width:  260px;

  /* ── Z-Index ─────────────────────────────────── */
  --z-below:  -1;
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
  --z-tooltip: 600;
}