/* ==========================================================================
   Design Tokens - Clayworks Website
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       Colors
       Standardized from variations across pages:
       - #e9e2db, #e8e0d9, #e7e0d9 -> --color-cream
       ------------------------------------------------------------------------- */
    --color-cream: #e9e2db;
    --color-cream-dark: #d8d1c6;
    --color-cream-darker: #d8d1c9;
    
    --color-purple-dark: #2d2635;
    --color-purple-mid: #302831;
    --color-purple-light: #3e353f;
    --color-purple-hover: #29212a;
    
    --color-accent: #E95332;
    --color-accent-green: #7ed956;
    
    --color-text-dark: #1F1A24;
    --color-text-light: #e9e2db;
    --color-text-muted: rgba(255, 255, 255, 0.7);
    --color-text-muted-dark: rgba(255, 255, 255, 0.6);
    
    /* -------------------------------------------------------------------------
       Typography
       ------------------------------------------------------------------------- */
    --font-display: 'Instrument Serif', serif;
    --font-body: 'Source Sans 3', sans-serif;
    
    /* Font sizes - standardized scale */
    --text-xs: 0.75rem;      /* 12px - Nav links, labels, uppercase text */
    --text-sm: 0.85rem;      /* 13.6px - Footer text */
    --text-base: 1rem;       /* 16px - Base body */
    --text-md: 1.1rem;       /* 17.6px - Card text */
    --text-lg: 1.235rem;     /* 19.76px - Subtitles, body large */
    --text-xl: 1.75rem;      /* 28px - Card titles */
    --text-2xl: 2rem;        /* 32px - Mobile nav links */
    
    /* Additional text sizes */
    --text-card-number: 0.9rem;    /* 14.4px - Feature card numbers */
    --text-footer-email: 0.875rem; /* 14px - Footer email link */
    
    /* Display sizes using clamp for responsive scaling */
    --text-display-sm: clamp(1.95rem, 3.9vw, 2.6rem);   /* Secondary accordion */
    --text-display-md: clamp(2rem, 4vw, 3rem);          /* Section titles */
    --text-display-lg: clamp(2.5rem, 6vw, 4rem);        /* Hero title */
    --text-display-xl: clamp(2.6rem, 5.2vw, 3.9rem);    /* Page titles */
    
    /* Letter spacing */
    --letter-spacing-body: 0.2px;  /* Standard body text letter spacing */
    
    /* -------------------------------------------------------------------------
       Spacing Scale
       Standardized from various values used across pages
       ------------------------------------------------------------------------- */
    --space-2xs: 0.25rem;    /* 4px */
    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 1rem;        /* 16px */
    --space-md: 1.5rem;      /* 24px */
    --space-lg: 2rem;        /* 32px */
    --space-xl: 2.5rem;      /* 40px */
    --space-2xl: 3rem;       /* 48px */
    --space-3xl: 4rem;       /* 64px */
    --space-4xl: 5rem;       /* 80px */
    --space-5xl: 6rem;       /* 96px */
    --space-6xl: 8rem;       /* 128px */
    
    /* Page padding - responsive */
    --page-padding: 3rem;
    --page-padding-mobile: 1.8rem;
    
    /* Component-specific spacing */
    --space-footer: 1.25rem;       /* 20px - Footer padding */
    --space-accordion: 0.95rem;    /* 15.2px - Accordion item padding */
    --space-hero-image: 6.5rem;    /* 104px - Hero app image margin */
    --space-faq-hero: 10rem;       /* 160px - FAQ hero top padding */
    
    /* -------------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------------- */
    --max-width: 1200px;
    --border-radius-sm: 4px;
    --border-radius-base: 5px;     /* Feature cards container */
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    
    /* -------------------------------------------------------------------------
       Transitions
       ------------------------------------------------------------------------- */
    --transition-fast: 0.1s ease-out;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-burger: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-nav: 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    
    /* -------------------------------------------------------------------------
       Z-Index Scale
       ------------------------------------------------------------------------- */
    --z-background: -2;
    --z-background-video: -1;
    --z-base: 0;
    --z-content: 1;
    --z-elevated: 2;
    --z-mobile-nav: 1001;
    --z-burger: 1002;
    --z-nav: 1003;
    
    /* -------------------------------------------------------------------------
       Mobile Viewport Height Fix
       Set via JavaScript to handle mobile browser chrome
       ------------------------------------------------------------------------- */
    --vh: 1vh;
}