/* ============================================================
   PICHI AI DESIGN SYSTEM v4.0.0 — CSS Custom Properties
   Source: design-system.json
   Human premium: warm neutrals, Clashgrotesk, editorial space
   Orange hero accent (#FF7555), Purple CTA only (#6749C1/#8961FF)
   ============================================================ */

:root {

  /* ── Colors: Primary Purple (CTA/Interactive only) ── */
  --color-primary-50:  #F3F0FF;
  --color-primary-100: #E2DBFF;
  --color-primary-200: #C4B5FF;
  --color-primary-300: #A78FFF;
  --color-primary-400: #8961FF;
  --color-primary-500: #6749C1;
  --color-primary-600: #553BA0;
  --color-primary-700: #422D7E;
  --color-primary-800: #2F205B;
  --color-primary-900: #1C1238;

  /* ── Colors: Accent Orange (Hero accent — KPIs, highlights) ── */
  --color-orange-50:  #FFF1ED;
  --color-orange-100: #FFE0D8;
  --color-orange-200: #FFC2B1;
  --color-orange-300: #FF9E85;
  --color-orange-400: #FF7555;
  --color-orange-500: #E5573A;
  --color-orange-600: #C2402A;
  --color-orange-700: #9A3020;
  --color-orange-800: #6E2217;
  --color-orange-900: #3F130D;

  /* ── Colors: Accent Forest Green ── */
  --color-green-400: #4AAD72;
  --color-green-500: #1A8A4A;
  --color-green-600: #116634;

  /* ── Colors: Accent Teal ── */
  --color-teal-400: #29B8B8;
  --color-teal-500: #0E9D9D;
  --color-teal-600: #0A7A7A;

  /* ── Colors: Warm Neutrals ── */
  --color-neutral-50:  #F7F6F4;
  --color-neutral-100: #ECEAE6;
  --color-neutral-200: #D8D3CD;
  --color-neutral-300: #B8B1A8;
  --color-neutral-400: #998F85;
  --color-neutral-500: #726860;
  --color-neutral-600: #484038;
  --color-neutral-700: #2E2824;
  --color-neutral-800: #1E1A17;
  --color-neutral-900: #0E0C0A;

  /* ── Background ── */
  --bg-default:     #F7F6F4;
  --bg-subtle:      #FAF9F7;
  --bg-muted:       #FDFCFB;
  --bg-dark:        #0E0C0A;
  --bg-dark-subtle: #1A1715;

  /* ── Surface ── */
  --surface-default: #FFFFFF;
  --surface-raised:  #FFFFFF;
  --surface-dark:    #1E1A17;

  /* ── Text ── */
  --text-primary:    #0E0C0A;
  --text-secondary:  #2E2824;
  --text-tertiary:   #484038;
  --text-muted:      #726860;
  --text-disabled:   #B8B1A8;
  --text-inverse:    #FFFFFF;
  --text-on-dark:    #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, 0.60);
  --text-on-primary: #FFFFFF;
  --text-link:       #6749C1;
  --text-link-hover: #8961FF;

  /* ── Border ── */
  --border-subtle:    #ECEAE6;
  --border-default:   #D8D3CD;
  --border-strong:    #B8B1A8;
  --border-dark:      #484038;
  --border-dark-muted:#2E2824;

  /* ── Status ── */
  --status-success:         #1A8A4A;
  --status-success-subtle:  #E8F6EE;
  --status-warning:         #E07B00;
  --status-warning-subtle:  #FFF2DE;
  --status-error:           #C0281A;
  --status-error-subtle:    #FCECEA;
  --status-info:            #6749C1;
  --status-info-subtle:     #F3F0FF;

  /* ── Chart Colors ── */
  --chart-1: #FF7555;
  --chart-2: #6749C1;
  --chart-3: #1A8A4A;
  --chart-4: #C0281A;
  --chart-5: #0E9D9D;
  --chart-6: #726860;

  /* ── Typography ── */
  --font-sans: 'Clash Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* ── Type Scale ── */
  --text-h1:       clamp(40px, 5.42vw, 78px);
  --text-h2:       clamp(32px, 5vw, 72px);
  --text-h3:       clamp(24px, 2.5vw, 36px);
  --text-h4:       clamp(20px, 1.88vw, 27px);
  --text-h5:       18px;
  --text-body-lg:  clamp(16px, 1.56vw, 22px);
  --text-body:     clamp(14px, 1.25vw, 18px);
  --text-body-sm:  clamp(13px, 1.04vw, 15px);
  --text-label-lg: 14px;
  --text-label:    12px;
  --text-label-sm: 11px;
  --text-caption:  12px;
  --text-overline: 11px;
  --text-metric:   clamp(40px, 4.5vw, 72px);
  --text-metric-sm:clamp(28px, 3vw, 48px);

  --lh-tight:    1.1;
  --lh-snug:     1.2;
  --lh-normal:   1.25;
  --lh-relaxed:  1.55;
  --lh-loose:    1.65;

  --ls-tightest: -0.04em;
  --ls-tighter:  -0.03em;
  --ls-tight:    -0.025em;
  --ls-snug:     -0.02em;
  --ls-slight:   -0.015em;
  --ls-normal:   0em;
  --ls-wide:     0.08em;
  --ls-wider:    0.1em;

  /* ── Spacing ── */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  --section-padding-v: clamp(64px, 7.5vw, 108px);
  --section-padding-h: clamp(24px, 3.75vw, 54px);
  --page-gutter:       clamp(24px, 3.75vw, 54px);
  --section-gap:       clamp(48px, 7.5vw, 108px);
  --card-padding:      32px;
  --card-gap:          clamp(24px, 4.17vw, 60px);
  --inline-gap:        8px;

  /* ── Border Radius ── */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   9px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* Semantic radius */
  --radius-card:   0px;
  --radius-button: clamp(6px, 0.63vw, 9px);
  --radius-input:  0px;
  --radius-badge:  2px;
  --radius-chip:   9999px;
  --radius-modal:  4px;
  --radius-avatar: 9999px;
  --radius-tag:    9999px;

  /* ── Shadows ── */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(14, 12, 10, 0.04);
  --shadow-sm:   0 2px 4px rgba(14, 12, 10, 0.05);
  --shadow-md:   0 4px 24px rgba(14, 12, 10, 0.08);
  --shadow-lg:   0 8px 32px rgba(14, 12, 10, 0.09);
  --shadow-xl:   0 16px 56px rgba(14, 12, 10, 0.11);
  --shadow-2xl:  0 24px 80px rgba(14, 12, 10, 0.14);
  --shadow-inner: inset 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card:  0 4px 7px rgba(14, 12, 10, 0.03), 0 18px 25px rgba(14, 12, 10, 0.04), 0 47px 80px rgba(14, 12, 10, 0.06);
  --shadow-card-hover: 0 8px 40px rgba(14, 12, 10, 0.09), 0 2px 8px rgba(14, 12, 10, 0.05);
  --shadow-focus: 0 0 0 2px rgba(103, 73, 193, 0.30);

  /* ── Animation Durations ── */
  --dur-immediate:  60ms;
  --dur-fast:       120ms;
  --dur-normal:     220ms;
  --dur-deliberate: 380ms;
  --dur-slow:       540ms;
  --dur-cinematic:  800ms;
  --dur-entrance:   680ms;

  /* ── Animation Easings ── */
  --ease-default:    cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-decelerate: cubic-bezier(0.0,   0.0,   0.2,   1.0);
  --ease-accelerate: cubic-bezier(0.4,   0.0,   1.0,   1.0);
  --ease-expressive: cubic-bezier(0.16,  1.0,   0.3,   1.0);
  --ease-settle:     cubic-bezier(0.25,  1.0,   0.5,   1.0);
  --ease-overshoot:  cubic-bezier(0.34,  1.56,  0.64,  1.0);
  --ease-sharp:      cubic-bezier(0.4,   0.0,   0.6,   1.0);

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

  /* ── Effects: Nav Blur ── */
  --nav-blur-bg:     rgba(247, 246, 244, 0.88);
  --nav-blur-border: rgba(14, 12, 10, 0.06);
  --nav-blur-filter: blur(16px);
}