/* =============================================================================
   FLUENT UI 2 DESIGN TOKENS
   Microsoft Fluent 2 design system tokens + Axpo brand overrides
   Reference: https://fluent2.microsoft.design/
   ============================================================================= */

:root {
    /* =========================================================================
     1. COLOR TOKENS — Neutral & Semantic Palette
     ========================================================================= */

    /* NEUTRAL GRAYS — Fluent color palette */
    --fluent-color-neutral-0: #ffffff;
    --fluent-color-neutral-5: #faf9f8;
    --fluent-color-neutral-10: #f3f2f1;
    --fluent-color-neutral-15: #ececeb;
    --fluent-color-neutral-20: #e1dfdd;
    --fluent-color-neutral-30: #c8c6c4;
    --fluent-color-neutral-40: #b4b0ac;
    --fluent-color-neutral-50: #a19f9d;
    --fluent-color-neutral-60: #8a8886;
    --fluent-color-neutral-70: #73707d;
    --fluent-color-neutral-80: #605e5c;
    --fluent-color-neutral-90: #484644;
    --fluent-color-neutral-100: #333332;
    --fluent-color-neutral-110: #212120;
    --fluent-color-neutral-120: #0d0d0d;

    /* BRAND COLOR — Axpo Blue (Fluent Brand Blue #0078D4 override) */
    /* Using Axpo's primary brand color #313193 */
    --fluent-color-brand-primary: #313193;
    --fluent-color-brand-primary-light: #6a6ad9;
    --fluent-color-brand-primary-dark: #1d1d57;

    /* ACCENT COLORS — Fluent semantic colors */
    --fluent-color-success: #107c10;
    --fluent-color-success-light: #e6f7f4;
    --fluent-color-success-dark: #0d6b59;

    --fluent-color-warning: #d83b01;
    --fluent-color-warning-light: #fff8e1;
    --fluent-color-warning-dark: #7a5c00;

    --fluent-color-danger: #d13438;
    --fluent-color-danger-light: #fdecea;
    --fluent-color-danger-dark: #8e0019;

    --fluent-color-info: #0078d4;
    --fluent-color-info-light: #f3f8ff;
    --fluent-color-info-dark: #003a7a;

    /* AXPO CUSTOM COLORS — Additional brand colors */
    --fluent-color-axpo-red: #ff5d64;
    --fluent-color-axpo-teal: #00ecd1;
    --fluent-color-axpo-secondary-blue: #4545cf;

    /* =========================================================================
     2. SEMANTIC COLOR MAPPING — Fluent semantic roles
     ========================================================================= */

    /* Foreground (Text) */
    --fluent-color-text-primary: #333332;
    --fluent-color-text-secondary: #73707d;
    --fluent-color-text-tertiary: #a19f9d;
    --fluent-color-text-disabled: #c8c6c4;
    --fluent-color-text-brand: #313193;
    --fluent-color-text-success: #107c10;
    --fluent-color-text-danger: #d13438;
    --fluent-color-text-warning: #d83b01;

    /* Background (Surfaces) */
    --fluent-color-bg-primary: #ffffff;
    --fluent-color-bg-secondary: #f3f2f1;
    --fluent-color-bg-tertiary: #ececeb;
    --fluent-color-bg-quaternary: #e1dfdd;

    /* Overlay & Depth */
    --fluent-color-overlay-neutral: rgba(0, 0, 0, 0.4);
    --fluent-color-overlay-inverted: rgba(255, 255, 255, 0.5);

    /* Stroke (Borders) */
    --fluent-color-stroke-focus: #313193;
    --fluent-color-stroke-default: #d2d0ce;
    --fluent-color-stroke-subdued: #e1dfdd;
    --fluent-color-stroke-divider: #e1dfdd;
    --fluent-color-stroke-strong: #595959;
    --fluent-color-stroke-disabled: #c8c6c4;

    /* Fill (Component Backgrounds) */
    --fluent-color-fill-brand-primary: #313193;
    --fluent-color-fill-brand-secondary: #ececfa;
    --fluent-color-fill-success: #107c10;
    --fluent-color-fill-danger: #d13438;
    --fluent-color-fill-warning: #d83b01;
    --fluent-color-fill-neutral-subtle: #f3f2f1;
    --fluent-color-fill-neutral-secondary: #e1dfdd;
    --fluent-color-fill-disabled: #f3f2f1;

    /* =========================================================================
     3. TYPOGRAPHY TOKENS — Fluent type scale
     =========================================================================  */

    /* Font Family */
    --fluent-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    --fluent-font-family-mono: "Cascadia Code", "SF Mono", "Fira Code", monospace;

    /* Font Size — Fluent 12px base scale */
    --fluent-font-size-100: 12px;
    /* Small text, captions */
    --fluent-font-size-200: 14px;
    /* Body text */
    --fluent-font-size-300: 16px;
    /* Standard body */
    --fluent-font-size-400: 18px;
    /* Large body */
    --fluent-font-size-500: 20px;
    /* Subheading */
    --fluent-font-size-600: 24px;
    /* Heading */
    --fluent-font-size-700: 28px;
    /* Large heading */
    --fluent-font-size-800: 32px;
    /* Extra large heading */
    --fluent-font-size-900: 40px;
    /* Hero heading */

    /* Font Weight */
    --fluent-font-weight-regular: 400;
    --fluent-font-weight-medium: 500;
    --fluent-font-weight-semibold: 600;
    --fluent-font-weight-bold: 700;

    /* Line Height */
    --fluent-line-height-100: 16px;
    /* 12px text */
    --fluent-line-height-200: 20px;
    /* 14px text */
    --fluent-line-height-300: 22px;
    /* 16px text */
    --fluent-line-height-400: 24px;
    /* 18px text */
    --fluent-line-height-500: 28px;
    /* 20px text */
    --fluent-line-height-600: 32px;
    /* 24px text */
    --fluent-line-height-700: 36px;
    /* 28px text */
    --fluent-line-height-800: 40px;
    /* 32px text */

    /* =========================================================================
     4. SPACING TOKENS — Fluent 4px grid
     ========================================================================= */

    --fluent-space-0: 0px;
    --fluent-space-2: 2px;
    --fluent-space-4: 4px;
    --fluent-space-8: 8px;
    --fluent-space-12: 12px;
    --fluent-space-16: 16px;
    --fluent-space-20: 20px;
    --fluent-space-24: 24px;
    --fluent-space-28: 28px;
    --fluent-space-32: 32px;
    --fluent-space-40: 40px;
    --fluent-space-48: 48px;
    --fluent-space-56: 56px;
    --fluent-space-64: 64px;
    --fluent-space-80: 80px;

    /* Padding Presets */
    --fluent-padding-xs: var(--fluent-space-8);
    --fluent-padding-sm: var(--fluent-space-12);
    --fluent-padding-md: var(--fluent-space-16);
    --fluent-padding-lg: var(--fluent-space-24);
    --fluent-padding-xl: var(--fluent-space-32);

    /* Margin Presets */
    --fluent-margin-xs: var(--fluent-space-8);
    --fluent-margin-sm: var(--fluent-space-12);
    --fluent-margin-md: var(--fluent-space-16);
    --fluent-margin-lg: var(--fluent-space-24);
    --fluent-margin-xl: var(--fluent-space-32);

    /* Gap Presets */
    --fluent-gap-xs: var(--fluent-space-8);
    --fluent-gap-sm: var(--fluent-space-12);
    --fluent-gap-md: var(--fluent-space-16);
    --fluent-gap-lg: var(--fluent-space-24);
    --fluent-gap-xl: var(--fluent-space-32);

    /* =========================================================================
     5. BORDER RADIUS TOKENS — Fluent radius scale
     ========================================================================= */

    --fluent-radius-2: 2px;
    --fluent-radius-4: 4px;
    --fluent-radius-8: 8px;
    --fluent-radius-12: 12px;
    --fluent-radius-16: 16px;
    --fluent-radius-20: 20px;
    --fluent-radius-circular: 9999px;

    /* Radius Semantic Aliases */
    --fluent-radius-small: var(--fluent-radius-4);
    --fluent-radius-medium: var(--fluent-radius-8);
    --fluent-radius-large: var(--fluent-radius-12);
    --fluent-radius-xlarge: var(--fluent-radius-16);

    /* =========================================================================
     6. SHADOW TOKENS — Fluent depth system
     ========================================================================= */

    /* Shadow Depth Levels (4 standard levels) */
    --fluent-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.08);
    --fluent-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.1);
    --fluent-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.12);
    --fluent-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.15);
    --fluent-shadow-28: 0 16px 28px rgba(0, 0, 0, 0.18);
    --fluent-shadow-64: 0 32px 64px rgba(0, 0, 0, 0.2);

    /* Semantic Shadow Aliases */
    --fluent-shadow-subtle: var(--fluent-shadow-2);
    --fluent-shadow-base: var(--fluent-shadow-4);
    --fluent-shadow-elevated: var(--fluent-shadow-8);
    --fluent-shadow-floating: var(--fluent-shadow-16);

    /* =========================================================================
     7. MOTION / TRANSITION TOKENS — Fluent timing
     ========================================================================= */

    /* Duration */
    --fluent-duration-fast: 100ms;
    --fluent-duration-normal: 150ms;
    --fluent-duration-medium: 200ms;
    --fluent-duration-slow: 300ms;
    --fluent-duration-slower: 500ms;

    /* Easing (Fluent uses ease-out cubic for natural motion) */
    --fluent-easing-linear: linear;
    --fluent-easing-ease: ease;
    --fluent-easing-ease-in: cubic-bezier(0.3, 0, 1, 1);
    --fluent-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --fluent-easing-ease-in-out: cubic-bezier(0.3, 0, 0.2, 1);

    /* =========================================================================
     8. COMPONENT TOKENS — Fluent component sizing
     ========================================================================= */

    /* Button */
    --fluent-button-height-small: 24px;
    --fluent-button-height-medium: 32px;
    --fluent-button-height-large: 40px;
    --fluent-button-padding-horizontal: var(--fluent-space-16);
    --fluent-button-font-size: var(--fluent-font-size-200);
    --fluent-button-font-weight: var(--fluent-font-weight-semibold);
    --fluent-button-border-radius: var(--fluent-radius-4);
    --fluent-button-gap: var(--fluent-space-8);

    /* Input / Form Control */
    --fluent-control-height-small: 24px;
    --fluent-control-height-medium: 32px;
    --fluent-control-height-large: 40px;
    --fluent-control-padding-vertical: var(--fluent-space-8);
    --fluent-control-padding-horizontal: var(--fluent-space-12);
    --fluent-control-font-size: var(--fluent-font-size-200);
    --fluent-control-border-radius: var(--fluent-radius-4);
    --fluent-control-border-width: 1px;
    --fluent-control-focus-ring-width: 2px;
    --fluent-control-focus-ring-color: var(--fluent-color-brand-primary);

    /* Badge / Pill */
    --fluent-badge-height: 20px;
    --fluent-badge-padding-horizontal: var(--fluent-space-8);
    --fluent-badge-font-size: var(--fluent-font-size-100);
    --fluent-badge-font-weight: var(--fluent-font-weight-semibold);
    --fluent-badge-border-radius: var(--fluent-radius-circular);

    /* Avatar */
    --fluent-avatar-size-small: 24px;
    --fluent-avatar-size-medium: 36px;
    --fluent-avatar-size-large: 56px;
    --fluent-avatar-border-radius: var(--fluent-radius-circular);

    /* Card */
    --fluent-card-padding: var(--fluent-space-16);
    --fluent-card-border-radius: var(--fluent-radius-8);
    --fluent-card-shadow: var(--fluent-shadow-2);

    /* =========================================================================
     9. AXPO BRAND OVERRIDES — Custom branding while using Fluent tokens
     ========================================================================= */

    /* Accent bar gradient (Axpo yellow→red→blue) */
    --axpo-gradient-brand: linear-gradient(135deg, #ffed57 0%, #ff5d64 25%, #4545cf 100%);

    /* Allow accent bar styling */
    --axpo-accent-bar-height: 4px;

    /* Axpo custom semantic colors (complementary) */
    --axpo-color-secondary: #4545cf;
    --axpo-color-tertiary: #00ecd1;
}

/* =========================================================================
   10. FALLBACK ALIASES — For legacy code compatibility
   ========================================================================= */

:root {
    /* Map Fluent tokens to common design system naming */
    --color-text-primary: var(--fluent-color-text-primary);
    --color-text-secondary: var(--fluent-color-text-secondary);
    --color-background: var(--fluent-color-bg-primary);
    --color-background-1: var(--fluent-color-bg-secondary);
    --color-background-2: var(--fluent-color-bg-tertiary);
    --color-surface: var(--fluent-color-bg-secondary);
    --color-border: var(--fluent-color-stroke-default);
    --color-border-soft: var(--fluent-color-stroke-subdued);

    /* Map Fluent to legacy Axpo naming */
    --color-brand: var(--fluent-color-brand-primary);
    --color-primary: var(--fluent-color-axpo-red);
    --color-secondary: var(--axpo-color-secondary);
    --color-tertiary: var(--axpo-color-tertiary);
    --color-success: var(--fluent-color-success);
    --color-danger: var(--fluent-color-danger);

    /* Font aliases */
    --font-sans: var(--fluent-font-family-base);
    --font-mono: var(--fluent-font-family-mono);

    /* Spacing aliases */
    --space-xs: var(--fluent-space-8);
    --space-sm: var(--fluent-space-12);
    --space-md: var(--fluent-space-16);
    --space-lg: var(--fluent-space-24);
    --space-xl: var(--fluent-space-32);

    /* Radius aliases */
    --radius-sm: var(--fluent-radius-4);
    --radius-md: var(--fluent-radius-8);
    --radius-lg: var(--fluent-radius-12);

    /* Shadow aliases */
    --shadow-soft: var(--fluent-shadow-2);
    --shadow-hover: var(--fluent-shadow-4);

    /* Gradients */
    --gradient-brand: var(--axpo-gradient-brand);
}

/* =========================================================================
   11. ROOT ELEMENT DEFAULTS — Apply base typography
   ========================================================================= */

html {
    font-size: 16px;
    font-family: var(--fluent-font-family-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--fluent-color-bg-secondary);
    color: var(--fluent-color-text-primary);
    line-height: var(--fluent-line-height-400);
    font-size: var(--fluent-font-size-200);
}