/* ==========================================================================
   TheraLink PH — Design Tokens
   Single source of truth for colors, radius, spacing, shadows, typography.
   Import this once in head.php; every page inherits the same variables.
   ========================================================================== */

:root {
    /* --- Brand palette (6 colors) --- */
    --coral: #EF7860;
    --coral-hover: #E2664D;
    --coral-tint: #FCEAE5;
    --sage: #4F9D8B;
    --sage-hover: #3D8775;
    --sage-tint: #E8F2EF;
    --ink: #202826;
    --ink-soft: #2F3D39;
    --paper: #F7F9F6;
    --paper-2: #FFFFFF;
    --periwinkle: #5C7FB8;
    --periwinkle-tint: #E8EEF7;
    --marigold: #F0B23A;
    --marigold-tint: #FFF4DD;

    /* --- Semantic colors --- */
    --line: #E2E8E3;
    --muted: #5C6663;
    --muted-light: #9CA3AF;
    --error: #DC2626;
    --error-tint: rgba(220, 38, 38, .06);
    --success: #047857;
    --success-tint: rgba(16, 185, 129, .07);

    /* --- Sidebar (deliberate dark navy — documented choice) --- */
    --sidebar-1: #0B1A33;
    --sidebar-2: #13284A;

    /* --- Radius scale (5 steps) --- */
    --radius-sm: 8px;    /* inputs, chips, small buttons */
    --radius-md: 12px;   /* buttons, small cards, icon chips */
    --radius-lg: 16px;   /* cards, panels */
    --radius-xl: 24px;   /* hero sections, modals */
    --radius-pill: 999px;

    /* --- Spacing scale (4-point grid) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 3px rgba(32, 40, 38, .06);
    --shadow-md: 0 2px 14px rgba(32, 40, 38, .06);
    --shadow-lg: 0 12px 22px -12px rgba(32, 40, 38, .25);
    --shadow-xl: 0 24px 80px rgba(0, 0, 0, .08);

    /* --- Typography --- */
    --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Space Grotesk", "Karla", sans-serif;
    --font-ui: "Inter", "Karla", -apple-system, system-ui, sans-serif;

    /* --- Transitions --- */
    --transition-fast: .15s ease;
    --transition: .2s ease;
    --transition-slow: .3s ease;

    /* --- Legacy aliases (used across existing views as --accent, --accent-2, etc.)
           Kept for backward compat while views migrate to canonical names. --- */
    --accent: var(--coral);
    --accent-hover: var(--coral-hover);
    --accent-tint: var(--coral-tint);
    --accent-2: var(--sage);
    --ink2: var(--ink-soft);
    --text: var(--ink);
    --text-muted: var(--muted);
    --text-light: var(--muted-light);
    --border: var(--line);
    --white: var(--paper-2);
    --input-bg: var(--paper);
    --login-bg: var(--paper);

    /* Legacy role-specific aliases (used in admin/parent dashboards) */
    --gold: var(--marigold);
    --gold-light: var(--marigold);
    --teal: var(--sage);
    --blue: var(--periwinkle);
}