/**
 * assets/css/tokens.css
 * Lullaby Care Design System - CSS Custom Properties
 *
 * This file centralizes all design tokens as CSS custom properties.
 * Import this after Tailwind to override with consistent token values.
 */

/* ============================================
   DESIGN TOKENS - CSS CUSTOM PROPERTIES
============================================ */
:root {
    /* ============================================
       SURFACE & BACKGROUND
    ============================================ */
    --surface: #f4faff;
    --surface-dim: #c0dfee;
    --surface-bright: #f4faff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #e6f6ff;
    --surface-container: #d9f2ff;
    --surface-container-high: #ceedfd;
    --surface-container-highest: #c9e7f7;

    /* ============================================
       ON-SURFACE (TEXT)
    ============================================ */
    --on-surface: #001f2a;
    --on-surface-variant: #41484b;

    /* ============================================
       INVERSE COLORS
    ============================================ */
    --inverse-surface: #163440;
    --inverse-on-surface: #e0f4ff;

    /* ============================================
       OUTLINES
    ============================================ */
    --outline: #71787c;
    --outline-variant: #c1c7cb;
    --surface-tint: #3c6474;

    /* ============================================
       PRIMARY - Soft Sky Blue (#3c6474)
    ============================================ */
    --primary: #3c6474;
    --on-primary: #ffffff;
    --primary-container: #b9e2f5;
    --on-primary-container: #3e6576;
    --inverse-primary: #a4cddf;

    /* ============================================
       SECONDARY - Warm Neutral (#625e57)
    ============================================ */
    --secondary: #625e57;
    --on-secondary: #ffffff;
    --secondary-container: #e5dfd6;
    --on-secondary-container: #66625b;

    /* ============================================
       TERTIARY
    ============================================ */
    --tertiary: #446371;
    --on-tertiary: #ffffff;
    --tertiary-container: #c0e1f2;
    --on-tertiary-container: #466473;

    /* ============================================
       ERROR
    ============================================ */
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    /* ============================================
       FIXED COLORS (High Contrast Components)
    ============================================ */
    --primary-fixed: #c0e9fc;
    --primary-fixed-dim: #a4cddf;
    --on-primary-fixed: #001f29;
    --on-primary-fixed-variant: #234c5b;

    --secondary-fixed: #e8e1d9;
    --secondary-fixed-dim: #ccc6bd;
    --on-secondary-fixed: #1e1b16;
    --on-secondary-fixed-variant: #4a4640;

    --tertiary-fixed: #c7e7f9;
    --tertiary-fixed-dim: #abcbdc;
    --on-tertiary-fixed: #001f2a;
    --on-tertiary-fixed-variant: #2c4b59;

    /* ============================================
       BACKGROUND
    ============================================ */
    --background: #f4faff;
    --on-background: #001f2a;
    --surface-variant: #c9e7f7;

    /* ============================================
       TYPOGRAPHY - Nunito Sans
    ============================================ */
    --font-heading: 'Nunito Sans', sans-serif;
    --font-body: 'Nunito Sans', sans-serif;
    --font-display: 'Nunito Sans', sans-serif;

    /* ============================================
       SPACING (8px base grid)
    ============================================ */
    --spacing-xs: 4px;
    --spacing-sm: 12px;
    --spacing-md: 24px;
    --spacing-lg: 48px;
    --spacing-xl: 80px;

    --container-max: 1280px;
    --gutter: 24px;
    --header-height: 80px;

    /* ============================================
       BORDER RADIUS
    ============================================ */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* ============================================
       EFFECTS
    ============================================ */
    --glass-bg: rgba(244, 250, 255, 0.85);
    --glass-border: rgba(192, 223, 238, 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 31, 42, 0.08);
    --blur-amount: 12px;

    /* ============================================
       TRANSITIONS
    ============================================ */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;
}

/* ============================================
   BACKWARD COMPATIBILITY ALIASES
   (For existing code that uses older token names)
============================================ */
:root {
    /* Legacy Royal Club palette */
    --color-brand-milk: #f4faff;
    --color-brand-canvas: #d9f2ff;
    --color-brand-emerald: #3c6474;
    --color-brand-emerald-light: #446371;
    --color-brand-gold: #625e57;
    --color-brand-gold-light: #e5dfd6;
    --color-brand-cream: #e6f6ff;
    --color-brand-charcoal: #001f2a;

    /* Legacy semantic mappings */
    --color-primary: #3c6474;
    --color-white: #f4faff;
    --color-accent: #625e57;
    --color-accent-glow: #e5dfd6;
    --color-surface: #f4faff;
    --color-text-heading: #001f2a;
    --color-text-body: #41484b;
    --color-error: #ba1a1a;
    --color-success: #15803d;

    /* Legacy Aura Premium palette (admin) */
    --deep-navy: #3c6474;
    --electric-cyan: #625e57;
    --soft-sky: #c9e7f7;
    --surface-glass: rgba(255, 255, 255, 0.7);
    --border-subtle: #c1c7cb;
    --background-mute: #f4faff;
}

/* ============================================
   DARK MODE (Future Enhancement)
   Uncomment and customize as needed
============================================ */
/*
.dark {
    --surface: #1a1d21;
    --surface-dim: #12151a;
    --surface-container-low: #22262b;
    --surface-container: #2a2f35;
    --surface-container-high: #32383f;
    --surface-container-highest: #3a4047;
    --on-surface: #e2e5e9;
    --on-surface-variant: #aeb3b9;
    --outline: #7a8088;
    --outline-variant: #42484f;
    --inverse-surface: #e2e5e9;
    --inverse-on-surface: #12151a;
    --primary: #6db4c8;
    --on-primary: #003543;
    --primary-container: #004d61;
    --on-primary-container: #bce9f6;
    --background: #12151a;
    --on-background: #e2e5e9;
    --surface-variant: #42484f;
}
*/