/**
 * Creative Legend (CL) Theme Design Tokens
 * Source of truth for brand colors, typography, elevations, and layout metrics.
 * Based on CL UI.pdf and the Developer Brief.
 */
:root {
    /* Creative Legend Brand Colors (Extracted directly from logo) */
    --cl-green-deep: #084734;       /* Primary dark green from logo */
    --cl-green-mid: #257F67;        /* Balanced mid-green */
    --cl-green-light: #39A78D;      /* Vibrant mint-teal from logo */
    --cl-green-bright: #4EC3A6;     /* Brilliant mint accent for dark surfaces */
    --cl-mint-soft: #EBF7F4;        /* Soft mint panel & card background */
    --cl-mint-card: #F2FAF7;        /* Light mint card surface */
    --cl-sand: #FBF9F5;             /* Subtle warm sand tint */
    --cl-sky: #F3F8F9;              /* Subtle cool sky tint */

    /* Core Semantic Palette */
    --lime: #39A78D;                /* Primary brand interactive teal-mint */
    --lime-dark: #084734;           /* Deep hover green */
    --lime-accent: #4EC3A6;         /* Vibrant high-contrast accent green */
    --lime-glow: rgba(57, 167, 141, 0.16);
    --lime-glow-strong: rgba(57, 167, 141, 0.32);

    /* Dark Neutrals */
    --dark: #084734;                /* Deep signature green-black */
    --dark-2: #052E22;              /* Rich deep background */
    --dark-3: #0E5741;              /* Dark surface container */
    --dark-4: #156B51;              /* Subtle dark borders */
    --mid: #3E4A46;                 /* Neutral body text */
    --muted: #6C7D77;               /* Metadata & secondary text */

    /* Light Neutrals */
    --light: var(--cl-mint-soft);   /* Soft mint card background */
    --lighter: #F6FAF8;             /* Ultra-light clean background */
    --border: #D5EAE3;              /* Clean subtle border */
    --white: #FFFFFF;               /* Pure white surface */

    /* Semantic Aliases */
    --black: #081410;               /* Deep ink black */
    --ink: #0C1E18;
    --line: var(--border);
    --soft: var(--cl-mint-soft);
    --overlay: rgba(8, 71, 52, 0.76);
    --overlay-dark: rgba(5, 46, 34, 0.92);

    /* Radii (Large rounded corners per brief) */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;          /* Pill buttons */

    /* Shadows */
    --shadow-sm: 0 2px 12px rgba(12, 59, 42, 0.05);
    --shadow: 0 8px 30px rgba(12, 59, 42, 0.08);
    --shadow-lg: 0 20px 60px rgba(12, 59, 42, 0.12);
    --shadow-lime: 0 8px 24px var(--lime-glow);
    --shadow-lime-hover: 0 12px 32px var(--lime-glow-strong);

    /* Transitions */
    --trans: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --ease: var(--trans);
    --ease-slow: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Layout */
    --container-width: 1320px;
    --container-pad: 24px;
}