/**
 * TinyTax Design System Tokens
 *
 * This file defines all CSS custom properties (variables) for the TinyTax brand.
 * It MUST be loaded in ALL layouts before any other CSS files.
 *
 * Reference: /brand.php (public brand guide)
 * Documentation: /docs/brand-rollout-plan.md
 */

:root {
    /* ============================================
       Brand Core Colours
       ============================================ */
    --navy: #1f2744;
    --green: #11B981;
    --coral: #F97066;  /* Marketing illustrations ONLY - avoid in UI */

    /* ============================================
       Warm Neutral Palette
       For backgrounds, borders, and text
       ============================================ */
    --warm-50: #FAFAF9;   /* Page backgrounds */
    --warm-100: #F5F5F4;  /* Card backgrounds, inputs */
    --warm-200: #E7E5E4;  /* Borders, dividers */
    --warm-300: #D6D3D1;  /* Disabled borders */
    --warm-400: #A8A29E;  /* Placeholder text */
    --warm-500: #78716C;  /* Secondary text */
    --warm-600: #57534E;  /* Body text */
    --warm-700: #44403C;  /* Strong text */
    --warm-800: #292524;  /* Headings */
    --warm-900: #1C1917;  /* Near-black */

    /* ============================================
       Primary Palette (Green)
       For growth, money, fresh starts, primary actions
       ============================================ */
    --primary-50: #ECFDF5;   /* Subtle success backgrounds */
    --primary-100: #D1FAE5;  /* Success badges, highlights */
    --primary-200: #A7F3D0;  /* Borders, progress bars */
    --primary-300: #6EE7B7;  /* Icons, illustrations */
    --primary-400: #34D399;  /* Hover states */
    --primary-500: #11B981;  /* Primary buttons, links (= --green) */
    --primary-600: #059669;  /* Hover/active states */
    --primary-700: #047857;  /* Pressed states */
    --primary-800: #065F46;  /* Dark mode accents */
    --primary-900: #064E3B;  /* Dark mode surfaces */

    /* ============================================
       Secondary Palette (Navy)
       For trust, professionalism, stability
       ============================================ */
    --secondary-50: #F8FAFC;   /* Page backgrounds */
    --secondary-100: #F1F5F9;  /* Card backgrounds */
    --secondary-200: #E2E8F0;  /* Borders, dividers */
    --secondary-300: #CBD5E1;  /* Disabled states */
    --secondary-400: #94A3B8;  /* Placeholder text */
    --secondary-500: #64748B;  /* Secondary text */
    --secondary-600: #475569;  /* Body text */
    --secondary-700: #334155;  /* Strong text */
    --secondary-800: #1E293B;  /* Headings */
    --secondary-900: #1f2744;  /* Logo, primary text (= --navy) */

    /* Navy gradient shade - for auth/marketing hero backgrounds */
    --navy-light: #2d3a5c;

    /* Green hover shade - for button hover states */
    --green-hover: #0EA472;

    /* ============================================
       Accent Palette (Coral)
       For warmth, celebration, human connection
       MARKETING ILLUSTRATIONS ONLY - avoid in UI
       ============================================ */
    --accent-50: #FFF5F4;   /* Warm backgrounds */
    --accent-100: #FFE4E1;  /* Celebration badges */
    --accent-200: #FFCDC7;  /* Warm highlights */
    --accent-300: #FFB0A6;  /* Illustrations */
    --accent-400: #FF8F82;  /* Icons, accents */
    --accent-500: #F97066;  /* Celebrations (= --coral) */
    --accent-600: #E5544A;  /* Hover states */
    --accent-700: #C7403A;  /* Pressed states */
    --accent-800: #A3332E;  /* Dark accents */
    --accent-900: #7F2622;  /* Dark surfaces */

    /* ============================================
       Semantic Colours
       Softer, friendlier variants for status states
       ============================================ */
    /* Success - "Great job!" */
    --success-light: #ECFDF5;
    --success: #11B981;
    --success-dark: #047857;

    /* Warning - "Just so you know..." */
    --warning-light: #FFFBEB;
    --warning: #F59E0B;
    --warning-dark: #B45309;

    /* Error - "Let's fix this together" */
    --error-light: #FEF2F2;
    --error: #E57373;
    --error-dark: #C62828;

    /* Info - "Here's a tip..." */
    --info-light: #EFF6FF;
    --info: #60A5FA;
    --info-dark: #2563EB;

    /* Draft - "Work in progress" */
    --draft-light: #E0E7FF;
    --draft: #8B5CF6;
    --draft-dark: #3730A3;

    /* Progress - "Actively working on it" */
    --progress-light: #FBCFE8;
    --progress: #F9A8D4;
    --progress-dark: #831843;

    /* ============================================
       Semantic Aliases (for alert/status styles)
       ============================================ */
    /* Success */
    --success-bg: #D1FAE5;
    --success-border: #6EE7B7;

    /* Warning */
    --warning-bg: #FEF3C7;
    --warning-border: #FCD34D;

    /* Error */
    --error-bg: #FEE2E2;
    --error-border: #FCA5A5;

    /* Info */
    --info-bg: #DBEAFE;
    --info-border: #93C5FD;
    --info-color: #3B82F6;

    /* Progress */
    --progress-bg: #FBCFE8;
    --progress-border: #F9A8D4;

    /* ============================================
       Legacy Aliases (backwards compatibility)
       These map old variable names to new values
       so existing CSS continues to work
       ============================================ */
    --primary-color: var(--green);
    --primary-dark: var(--primary-600);
    --primary-light: #DCFCE7;  /* Lighter green for hero gradients */
    --secondary-color: #3B82F6;  /* Blue - keeping for now */
    --text-dark: var(--navy);
    --text-light: var(--warm-500);
    --bg-light: var(--warm-50);
    --bg-white: #FFFFFF;
    --border-color: var(--warm-200);
    --error-color: var(--error);
    --success-color: var(--success);
    --warning-color: var(--warning);

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

    /* ============================================
       Layout
       ============================================ */
    --header-height-desktop: 72px;
    --header-height-mobile: 60px;
    --header-sticky-offset: var(--header-height-desktop);
}