/* ==========================================================================
   Design Tokens — Spodek Law Group NJ
   ========================================================================== */

:root {
    /* Colors */
    --color-accent: #D97736;
    --color-accent-hover: #b8622c;
    --color-accent-10: rgba(217, 119, 54, 0.1);
    --color-accent-20: rgba(217, 119, 54, 0.2);
    --color-accent-30: rgba(217, 119, 54, 0.3);
    --color-accent-50: rgba(217, 119, 54, 0.5);

    --color-bg-primary: #0a0a0a;
    --color-bg-card: #111111;
    --color-bg-card-alt: #1a1a1a;
    --color-bg-light: #F5F5F7;
    --color-bg-white: #ffffff;

    --color-border: #222222;
    --color-border-light: #333333;
    --color-border-white: rgba(255, 255, 255, 0.05);
    --color-border-white-10: rgba(255, 255, 255, 0.1);

    --color-text-white: #ffffff;
    --color-text-light: #cccccc;
    --color-text-muted: #888888;
    --color-text-dark: #555555;       /* WCAG AA on light bg: 7.46:1 on #fff */
    --color-text-dim: #888888;        /* WCAG AA on dark bg: 5.75:1 on #111 */
    --color-text-body: #aaaaaa;
    --color-text-placeholder: #888888; /* WCAG AA on dark input bg: 4.98:1 on #1a1a1a */
    --color-text-black: #111111;

    --color-white-5: rgba(255, 255, 255, 0.05);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-60: rgba(0, 0, 0, 0.6);

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;     /* 12px — Tailwind text-xs */
    --text-sm: 0.875rem;    /* 14px — Tailwind text-sm */
    --text-base: 1rem;      /* 16px — Tailwind text-base */
    --text-md: 1rem;        /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
    --text-6xl: 3.75rem;    /* 60px */
    --text-7xl: 4.5rem;     /* 72px */
    --text-8xl: 6rem;       /* 96px */
    --text-9xl: 8rem;       /* 128px */

    /* Font Weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;

    /* Layout */
    --container-max: 1280px;
    --container-narrow: 900px;
    --header-height: 5rem;   /* 80px / h-20 */

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-slower: 700ms ease;

    /* Z-index */
    --z-base: 0;
    --z-above: 10;
    --z-header: 50;
    --z-overlay: 100;
    --z-modal: 200;
}