/**
 * Thayyiba - Freelance Digital Marketer Portfolio
 * Design System Variables
 * Palette strictly adhered:
 * - Primary Dark Teal: #105666
 * - Cream: #F7F4D5
 * - Warm Brown: #8A5A44
 * - Burnt Clay: #C96F4A
 * - Black: #171717
 * - White: #FFFFFF
 */

:root {
  /* Brand Color Tokens */
  --color-primary-teal: #105666;
  --color-primary-teal-dark: #0b3d49;
  --color-primary-teal-light: #167085;
  --color-primary-teal-rgb: 16, 86, 102;
  
  --color-cream: #F7F4D5;
  --color-cream-light: #FAF8E5;
  --color-cream-surface: #F2EFC4;
  --color-cream-card: #FFFFFF;
  --color-cream-rgb: 247, 244, 213;

  --color-warm-brown: #8A5A44;
  --color-warm-brown-light: #A47057;
  --color-warm-brown-dark: #664130;
  --color-warm-brown-rgb: 138, 90, 68;

  --color-burnt-clay: #C96F4A;
  --color-burnt-clay-light: #d8825f;
  --color-burnt-clay-dark: #b05c39;
  --color-burnt-clay-rgb: 201, 111, 74;

  --color-black: #171717;
  --color-charcoal: #2a2a2a;
  --color-muted: #5e5954;
  --color-muted-light: #807a74;
  --color-white: #FFFFFF;
  --color-white-rgb: 255, 255, 255;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Newsreader', Georgia, serif;
  
  /* Font Sizes - Fluid Scales */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --fs-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-lg: clamp(1.35rem, 1.2rem + 0.75vw, 1.625rem);
  --fs-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.85rem + 2vw, 3.125rem);
  --fs-3xl: clamp(2.85rem, 2.2rem + 3.25vw, 4.25rem);
  --fs-display: clamp(3.2rem, 2.6rem + 4vw, 5.25rem);

  /* Spacing */
  --spacing-3xs: 0.25rem;
  --spacing-2xs: 0.5rem;
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4.5rem;
  --spacing-3xl: 6rem;
  --spacing-4xl: 8rem;

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 880px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: 0 2px 8px rgba(23, 23, 23, 0.04);
  --shadow-sm: 0 4px 14px rgba(23, 23, 23, 0.06);
  --shadow-md: 0 8px 26px rgba(23, 23, 23, 0.08);
  --shadow-lg: 0 16px 40px rgba(23, 23, 23, 0.1);
  --shadow-float: 0 20px 48px rgba(16, 86, 102, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 450ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Borders */
  --border-light: 1px solid rgba(138, 90, 68, 0.14);
  --border-card: 1px solid rgba(138, 90, 68, 0.18);
  --border-dark-section: 1px solid rgba(247, 244, 213, 0.15);
  
  /* Z-index layers */
  --z-base: 1;
  --z-card: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1100;
}