/* ================================================================
   variables.css — Chethan Kumar S Design System
   Solar Dusk × White Canvas
   ================================================================ */

:root {
  /* === BASE CANVAS === */
  --bg:              #FFFFFF;
  --surface:         rgba(247, 245, 242, 0.75);
  --surface-raised:  rgba(237, 235, 230, 0.80);
  --border:          rgba(10, 10, 10, 0.07);
  --border-strong:   rgba(10, 10, 10, 0.12);

  /* === SOLAR DUSK PALETTE === */
  --orange:          #F97316;
  --orange-deep:     #EA580C;
  --orange-glow:     rgba(249, 115, 22, 0.12);
  --orange-subtle:   rgba(249, 115, 22, 0.06);
  --orange-light:    #FFEDD5;

  /* === TYPOGRAPHY COLORS === */
  --ink:             #0A0A0A;
  --body:            #1C1C1E;
  --muted:           #6B7280;
  --smokegrey:       #B0B0B0;

  /* === FONTS === */
  --font-display:    'Syne', sans-serif;
  --font-body:       'DM Sans', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* === SPACING === */
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        32px;
  --space-2xl:       48px;
  --space-3xl:       64px;
  --space-4xl:       96px;
  --space-5xl:       128px;

  /* === RADII === */
  --radius-sm:       6px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-full:     9999px;

  /* === SHADOWS === */
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:       0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl:       0 20px 50px rgba(0, 0, 0, 0.1);
  --shadow-orange:   0 0 20px rgba(249, 115, 22, 0.3);

  /* === MOTION === */
  --ease-expo:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart:      cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:        0.3s;
  --dur-med:         0.7s;
  --dur-slow:        1.2s;

  /* === LAYOUT === */
  --max-width:       1200px;
  --max-width-wide:  1600px;
  --header-height:   80px;
}