/* ==========================================================================
   Baking School Design System & Theme Standards
   Single source of truth for colors, typography, spacing, and icons.
   DO NOT hardcode hex colors or pixel font sizes in components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ------------------------------------------------------------------------
       1. COLOR PALETTE
       ------------------------------------------------------------------------ */
    /* Primary / Brand (Warm Bakery Tone) */
    --color-primary: #8c4a15;
    --color-primary-hover: #753c10;
    --color-primary-light: #ab6024;
    --color-primary-dark: #5c2d0b;
    --color-primary-subtle: #fbf5ef;

    /* Secondary / Accent (Warm Amber & Gold) */
    --color-secondary: #d97706;
    --color-secondary-hover: #b45309;
    --color-secondary-light: #f59e0b;
    --color-accent: #e07a5f;

    /* Neutrals & Surfaces */
    --color-bg-app: #f8f9fa;
    --color-surface: #ffffff;
    --color-surface-subtle: #f1f3f5;
    --color-surface-muted: #e9ecef;

    /* Typography / Text Colors */
    --color-text-primary: #1f2937;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-text-subtle: #9ca3af;
    --color-text-inverse: #ffffff;

    /* Borders & Dividers */
    --color-border: #e5e7eb;
    --color-border-subtle: #f3f4f6;
    --color-border-strong: #d1d5db;

    /* Feedback & Functional States */
    --color-success: #28a745;
    --color-success-subtle: #e8f5e9;
    --color-danger: #dc3545;
    --color-danger-subtle: #fde8e8;
    --color-warning: #ffc107;
    --color-warning-subtle: #fff8e1;
    --color-info: #17a2b8;
    --color-info-subtle: #e0f7fa;

    /* ------------------------------------------------------------------------
       2. TYPOGRAPHY SCALE (rem-based, responsive)
       Matching Plus Jakarta Sans + Inter standard
       ------------------------------------------------------------------------ */
    --font-family-base: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: var(--font-family-base);

    --font-size-xs: 0.75rem;    /* 12px - Badges, tiny captions */
    --font-size-sm: 0.875rem;   /* 14px - Helper text, secondary labels */
    --font-size-base: 1rem;     /* 16px - Standard body text */
    --font-size-md: 1.125rem;   /* 18px - Subheadings, card titles */
    --font-size-lg: 1.25rem;    /* 20px - Section headers */
    --font-size-xl: 1.5rem;     /* 24px - Page titles */
    --font-size-2xl: 1.875rem;  /* 30px - Major feature headers */
    --font-size-3xl: 2.25rem;   /* 36px - Hero banners */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ------------------------------------------------------------------------
       3. TABLER ICONS (Thin Style - Stroke Width 1, Weight 200)
       ------------------------------------------------------------------------ */
    --icon-size-xs: 0.875rem;   /* 14px */
    --icon-size-sm: 1rem;       /* 16px */
    --icon-size-md: 1.25rem;    /* 20px - Standard inline icon */
    --icon-size-lg: 1.5rem;     /* 24px - Navigation / Action buttons */
    --icon-size-xl: 2rem;       /* 32px - Feature icons */
    --icon-size-2xl: 2.5rem;    /* 40px - Large display icons */

    /* ------------------------------------------------------------------------
       4. SPACING SCALE
       ------------------------------------------------------------------------ */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */

    /* ------------------------------------------------------------------------
       5. BORDER RADIUS & ELEVATION
       ------------------------------------------------------------------------ */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --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);
}

/* ==========================================================================
   Global Base Typography Application
   ========================================================================== */
html, body, button, input, select, textarea {
    font-family: var(--font-family-base) !important;
}

/* ==========================================================================
   Tabler Icons Baseline Rules
   ========================================================================== */
.ti {
    display: inline-block;
    vertical-align: -0.15em;
    line-height: 1;
    font-size: var(--icon-size-md);
    stroke-width: 1px;
}

.ti-size-xs { font-size: var(--icon-size-xs) !important; }
.ti-size-sm { font-size: var(--icon-size-sm) !important; }
.ti-size-md { font-size: var(--icon-size-md) !important; }
.ti-size-lg { font-size: var(--icon-size-lg) !important; }
.ti-size-xl { font-size: var(--icon-size-xl) !important; }
.ti-size-2xl { font-size: var(--icon-size-2xl) !important; }

/* ==========================================================================
   Semantic Utility Classes
   ========================================================================== */
.text-primary       { color: var(--color-primary) !important; }
.text-secondary     { color: var(--color-text-secondary) !important; }
.text-muted         { color: var(--color-text-muted) !important; }
.text-success       { color: var(--color-success) !important; }
.text-danger        { color: var(--color-danger) !important; }
.text-warning       { color: var(--color-warning) !important; }
.text-info          { color: var(--color-info) !important; }
.text-inverse       { color: var(--color-text-inverse) !important; }

.bg-primary         { background-color: var(--color-primary) !important; color: var(--color-text-inverse) !important; }
.bg-surface         { background-color: var(--color-surface) !important; }
.bg-app             { background-color: var(--color-bg-app) !important; }
.bg-subtle          { background-color: var(--color-surface-subtle) !important; }

.border-theme       { border: 1px solid var(--color-border) !important; }
.border-subtle      { border: 1px solid var(--color-border-subtle) !important; }

.rounded-sm         { border-radius: var(--radius-sm) !important; }
.rounded-md         { border-radius: var(--radius-md) !important; }
.rounded-lg         { border-radius: var(--radius-lg) !important; }
.rounded-full       { border-radius: var(--radius-full) !important; }

.shadow-sm          { box-shadow: var(--shadow-sm) !important; }
.shadow-md          { box-shadow: var(--shadow-md) !important; }
.shadow-lg          { box-shadow: var(--shadow-lg) !important; }