/* =============================================================================
   ThreeBeez Design Tokens (CC-062)
   Canonical --x- namespace. Overrides Xablu.Blazor defaults with 3Beez brand.
   Tokens auto-adjust for dark mode via [data-theme='dark'].

   HYBRID APPROACH (CC062-05):
   This file (design-tokens.css) provides the global token definitions at :root
   level. These act as the baseline fallback for the entire application.

   XThemeProvider in MainLayout.razor (and OnboardingLayout.razor) overrides
   specific values for the app shell scope via inline CSS custom properties on
   its wrapper element. This is intentional:
     - design-tokens.css = global fallback (always loaded via <link>)
     - XThemeProvider     = scoped overrides (applied to the app shell DOM subtree)

   When XThemeProvider sets a token (e.g. --x-color-primary), it takes
   precedence within its subtree due to CSS specificity. Outside the
   XThemeProvider subtree (e.g. error pages, onboarding), design-tokens.css
   values apply directly.

   Colour-Alias Table (hex → token):
     #AE9440  → --x-color-primary, --x-color-accent, --x-color-ring, --x-color-sidebar-primary, --x-color-chart-1
     #000000  → --x-color-foreground, --x-color-card-foreground, --x-color-popover-foreground
     #F5F3EE  → --x-color-background
     #ffffff  → --x-color-card, --x-color-popover, --x-color-input, --x-color-input-background
     #8E949B  → --x-color-muted
     #646A73  → --x-color-muted-foreground
     #D0D7E0  → --x-color-border
     #C82D2D  → --x-color-destructive, --x-chart-5
     #9CC1E0  → --x-color-chip-selected
     #3C850E  → --x-chart-2
     #9C670B  → --x-chart-3
     #260EBC  → --x-chart-4
   Phase 178: Wrapped in @layer project-tokens — cascade priority is deterministic.
   Phase 185B: Layer order declared — project-overrides sits between project-tokens
   and library-globals so 3beez-overrides.css can override tokens but not scoped CSS.
   ============================================================================= */

@layer project-tokens, project-overrides;

@layer project-tokens {

/* --- Base Reset (browser defaults) --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* --- Brand Colors --- */
:root {
    --x-color-brand-graphite: #000000;
    --x-color-brand-gold: #AE9440;
    --x-color-brand-amber: #AE9440;
    --x-color-brand-gold-light: rgba(174, 148, 64, 0.15);
    --x-color-brand-gold-dark: #9D853A;
}

/* --- Typography Fonts --- */
:root {
    --x-font-heading: 'Instrument Serif', Georgia, serif;
    --x-font-body: 'Inter', 'SF Pro', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --x-font-family-satoshi: 'Satoshi', sans-serif;
    --x-font-family-sf-pro: 'SF Pro', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    --x-font-family-inter: var(--x-font-body);
}

/* --- Primary Color Scale (built from #AE9440) --- */
:root {
    --x-color-primary-50: #faf6eb;
    --x-color-primary-100: #f2eace;
    --x-color-primary-200: #e5d49d;
    --x-color-primary-300: #d8bf6c;
    --x-color-primary-400: #AE9440;
    --x-color-primary-500: #9a8338;
    --x-color-primary-600: #7d6a2d;
    --x-color-primary-700: #605023;
    --x-color-primary-800: #433718;
    --x-color-primary-900: #261e0e;
}

/* --- Semantic Colors --- */
:root {
    --x-color-success-light: #deeecf;
    --x-color-success: #6B8E23;
    --x-color-success-dark: #557a1a;

    --x-color-warning-light: #fffbe8;
    --x-color-warning: #FFCD1E;
    --x-color-warning-dark: #cca318;

    --x-color-error-light: #f5ddd9;
    --x-color-error: #954535;
    --x-color-error-dark: #7d3a2d;

    --x-color-info-light: #d3e5f7;
    --x-color-info: #1C6FB8;
    --x-color-info-dark: #165a94;
}

/* --- Neutral Colors --- */
:root {
    --x-color-neutral-50: #f8f9fa;
    --x-color-neutral-100: #f1f3f5;
    --x-color-neutral-200: #e9ecef;
    --x-color-neutral-300: #D0D7E0;
    --x-color-neutral-400: #ced4da;
    --x-color-neutral-500: #8E949B;
    --x-color-neutral-600: #646A73;
    --x-color-neutral-700: #495057;
    --x-color-neutral-800: #343a40;
    --x-color-neutral-900: #212529;
}

/* --- Background & Surface --- */
:root {
    --x-color-bg-page: #ffffff;
    --x-color-bg-card: #ffffff;
    --x-color-bg-elevated: #ffffff;
    --x-color-bg-subtle: var(--x-color-neutral-50);
    --x-color-bg-overlay: rgba(0, 0, 0, 0.4);

    --x-color-text-primary: #000000;
    --x-color-text-secondary: #646A73;
    --x-color-text-disabled: var(--x-color-neutral-400);
    --x-color-text-inverse: #ffffff;
}

/* --- Spacing (Figma-aligned — matches Xablu canonical scale + FigmaMake intermediates) --- */
:root {
    --x-spacing-2xs: 2px;
    --x-spacing-xs: 4px;
    --x-spacing-3: 6px;
    --x-spacing-sm: 8px;
    --x-spacing-2_5: 10px;
    --x-spacing-3sm: 12px;
    --x-spacing-md: 16px;
    --x-spacing-5: 20px;
    --x-spacing-lg: 24px;
    --x-spacing-xl: 32px;
    --x-spacing-2xl: 48px;
    --x-spacing-3xl: 64px;
}

/* --- Typography Sizes (Figma-aligned — matches FigmaMake reference) --- */
:root {
    --x-font-size: 16px;
    --x-font-family-base: var(--x-font-body);
    --x-font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    --x-font-size-caption: 0.75rem;
    --x-font-size-body-sm: 14px;
    --x-font-size-body: 16px;
    --x-font-size-body-lg: 1rem;
    --x-font-size-h4: 20px;
    --x-font-size-h3: 24px;
    --x-font-size-h2: 30px;
    --x-font-size-h1: 44px;

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

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

    /* Letter-spacing (CAT-A: FigmaMake typography alignment) */
    --x-letter-spacing-body: -0.32px;
    --x-letter-spacing-heading: -0.4px;
    --x-letter-spacing-button: 0.7px;
    --x-letter-spacing-sm: -0.28px;
}

/* --- Border Radius --- */
:root {
    --x-radius-sm: 5px;
    --x-radius-md: 10px;
    --x-radius-lg: 20px;
    --x-radius-xl: 24px;
    --x-radius-full: 9999px;
}

/* --- Shadows --- */
:root {
    --x-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --x-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --x-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --x-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    /* FigmaMake card shadow (CAT-D) */
    --x-shadow-card: 5px 5px 20px 0px #d6dce4;
}

/* --- Transitions --- */
:root {
    --x-transition-fast: 100ms ease-in-out;
    --x-transition-normal: 200ms ease-in-out;
    --x-transition-slow: 300ms ease-in-out;
}

/* =============================================================================
   3Beez Brand Overrides (Xablu semantic token layer)
   ============================================================================= */
:root {
    /* Core colors */
    --x-color-primary: #AE9440;
    --x-color-primary-foreground: #ffffff;
    --x-color-primary-hover: #8b7633;
    --x-color-primary-active: #685926;
    --x-color-primary-light: rgba(174, 148, 64, 0.15);
    --x-color-background: #F5F3EE;
    --x-color-foreground: #000000;
    --x-color-card: #ffffff;
    --x-color-card-foreground: #000000;
    --x-color-popover: #ffffff;
    --x-color-popover-foreground: #000000;
    --x-color-secondary: #71A6D2;
    --x-color-secondary-foreground: #ffffff;
    --x-color-muted: #8E949B;
    --x-color-muted-foreground: #646A73;
    --x-color-accent: #AE9440;
    --x-color-accent-foreground: #ffffff;
    --x-color-destructive: #954535;
    --x-color-destructive-foreground: #ffffff;
    --x-color-destructive-muted: var(--x-color-error-light);
    --x-color-destructive-light: #f5ddd9;
    --x-color-border: #D0D7E0;
    --x-color-input: #ffffff;
    --x-color-input-background: #ffffff;
    --x-color-ring: #AE9440;

    /* Elevation */
    --x-elevation-sm: 0 0 10px rgba(0, 0, 0, 0.1);

    /* Radius */
    --x-radius: 20px;
    --x-radius-card: 20px;

    /* Spacing */
    --x-spacing-card-padding: 16px;

    /* Sidebar widths */
    --x-sidebar-width: 300px;
    --x-sidebar-width-collapsed: 72px;

    /* Interactive states */
    --x-color-bg-hover: #f7f4ec;
    --x-color-bg-dark: #111318;
    --x-color-informative-light: #d4e4f2;

    /* Trust badges (FigmaMake) */
    --x-color-trust-verified: #34D399;
    --x-color-trust-vouched: #E8B923;
    --x-color-trust-trusted: #60A5FA;

    /* BeeScore value display (FigmaMake: brown-gold serif color) */
    --x-color-beescore-value: #7a682d;

    /* Earned attribute chip bg (FigmaMake: light blue #d4e4f2) */
    --x-color-chip-attribute: #d4e4f2;

    /* FigmaMake hardcoded values — exact pixel-perfect matches */
    --x-color-reject: #954535;           /* decline/reject button border + stroke */
    --x-color-graphite: #292a2c;         /* graphite dark button background */
    --x-color-divider: #EFF2F5;          /* light divider line between sections */
    --x-color-gold-accent: #e1bf52;      /* brighter gold for promo italic headings */
    --x-color-muted-text: #7a7f85;       /* secondary muted text (mutual conns, timestamps) */
    --x-color-emoji-border: #cbd3dd;     /* emoji circle border */
    --x-color-pitch-bg: #e3edf6;         /* pitch rating item background */
    --x-color-chip-light: #eff2f5;       /* light chip/badge background */
    --x-color-progress-inactive: #DBE0E7; /* onboarding progress bar inactive segment */
    --x-color-disabled-text: #b7bec7;    /* disabled button text (FigmaMake onboarding) */
    --x-color-discover-banner: #b8d3e9;  /* discover page banner background */
    --x-color-sent-bubble: #e3edf6;      /* sent message bubble background */
    --x-color-received-bubble: #f5f6f8;  /* received message bubble background */

    /* Score colors (BeeScore and trust dimensions) */
    --x-score-excellent: #6B8E23;
    --x-score-good: #AE9440;
    --x-score-fair: #9C670B;
    --x-score-low: #954535;

    /* Accessible gold (meets 4.5:1 on light backgrounds) */
    --x-color-primary-accessible: #8b7633;

    /* Priority badge backgrounds */
    --x-color-priority-high-bg: #ffeae6;
    --x-color-priority-low-bg: #e3edf6;
    --x-color-priority-low-text: #3d6b99;

    /* Progress bar track */
    --x-color-progress-track: #efead9;

    /* Action button text */
    --x-color-action-text: #515458;

    /* Box shadow color for cards */
    --x-color-card-shadow: #d6dce4;

    /* Primary tints (gold at reduced opacity — used by Dashboard cards) */
    --x-color-primary-tint-6: rgba(174, 148, 64, 0.06);
    --x-color-primary-tint-10: rgba(174, 148, 64, 0.10);
    --x-color-primary-tint-15: rgba(174, 148, 64, 0.15);
    --x-color-primary-tint-20: rgba(174, 148, 64, 0.20);

    /* Glass tokens (white at opacity — used by NavMenu sidebar, Dashboard dark sections) */
    --x-glass-6: rgba(255, 255, 255, 0.06);
    --x-glass-10: rgba(255, 255, 255, 0.10);
    --x-glass-12: rgba(255, 255, 255, 0.12);
    --x-glass-70: rgba(255, 255, 255, 0.70);
    --x-glass-75: rgba(255, 255, 255, 0.75);

    /* Overlay tokens (black at opacity — used by NavMenu gradient) */
    --x-overlay-20: rgba(0, 0, 0, 0.20);

    /* Avatar sizes (must be in project tokens — library tokens.css may not load
       before scoped component CSS in Blazor's static web asset bundling) */
    --x-avatar-size-xxxs: 24px;
    --x-avatar-size-xxs: 28px;
    --x-avatar-size-xs: 32px;
    --x-avatar-size-s: 40px;
    --x-avatar-size-m: 48px;
    --x-avatar-size-l: 56px;
    --x-avatar-size-xl: 72px;
    --x-avatar-size-xxl: 96px;
    --x-avatar-size-xxxl: 128px;
    --x-avatar-size-xxxxl: 184px;

    /* Badge sizes */
    --x-badge-size-dot: 8px;
    --x-badge-size-text: 20px;

    /* Label font */
    --x-label-font-family: var(--x-font-body);

    /* Color/overlay/shadow aliases */
    --x-color-black: #000000;
    --x-overlay-50: rgba(0, 0, 0, 0.5);
    --x-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

    /* Typography aliases (FigmaMake px overrides for Xablu rem defaults) */
    --x-text-6xl: 60px;   /* Display heading (Welcome, My Profile, etc.) */
    --x-text-5xl: 48px;
    --x-text-4xl: 44px;
    --x-text-3xl: 40px;   /* Section heading (BeeScore Details, modal headings, etc.) */
    --x-text-2_5xl: 36px;
    --x-text-2xl: 30px;
    --x-text-1_5xl: 28px;  /* Modal/card headings */
    --x-text-xl: 24px;
    --x-text-lg: 20px;
    --x-text-md: 18px;
    --x-text-base: 16px;
    --x-text-sm: 14px;
    --x-text-xs-lg: 13px;
    --x-text-xs: 0.75rem;  /* 12px */
    --x-text-xxs: 11px;
    --x-text-3xs: 10px;

    /* Chip selected state (blue — per FigmaMake) */
    --x-color-chip-selected: #9CC1E0;
    --x-color-chip-selected-foreground: #000000;

    /* Chart colors (golden record: --x-color-chart-*) */
    --x-color-chart-1: #AE9440;
    --x-color-chart-2: #3C850E;
    --x-color-chart-3: #9C670B;
    --x-color-chart-4: #260EBC;
    --x-color-chart-5: #C82D2D;

    /* Success/warning aliases */
    --x-color-success: #6B8E23;
    --x-color-success-muted: var(--x-color-success-light);
    --x-color-success-dark: #557a1a;
    --x-color-warning: #FFCD1E;
    --x-color-warning-muted: var(--x-color-warning-light);

    /* Sidebar — dark gradient with white text (golden record: --x-color-sidebar-*) */
    --x-color-sidebar: transparent;
    --x-color-sidebar-foreground: #ffffff;
    --x-color-sidebar-primary: #AE9440;
    --x-color-sidebar-primary-foreground: #ffffff;
    --x-color-sidebar-accent: #AE9440;
    --x-color-sidebar-accent-foreground: #ffffff;
    --x-color-sidebar-border: rgba(174, 148, 64, 0.3);
    --x-color-sidebar-ring: #AE9440;
    --x-color-sidebar-hover: rgba(255, 255, 255, 0.08);

}

/* =============================================================================
   Dark Theme Overrides
   ============================================================================= */
[data-theme='dark'] {
    --x-color-background: #0B0B0C;
    --x-color-foreground: #ffffff;
    --x-color-card: #161618;
    --x-color-card-foreground: #ffffff;
    --x-color-popover: #161618;
    --x-color-popover-foreground: #ffffff;
    --x-color-primary: #AE9440;
    --x-color-primary-foreground: #ffffff;
    --x-color-secondary: rgba(113, 166, 210, 0.15);
    --x-color-secondary-foreground: #71A6D2;
    --x-color-muted: #2A2A2C;
    --x-color-muted-foreground: #A0A3A8;
    --x-color-accent: #AE9440;
    --x-color-accent-foreground: #ffffff;
    --x-color-destructive: #bf6852;
    --x-color-destructive-foreground: #ffffff;
    --x-color-border: rgba(255, 255, 255, 0.08);
    --x-color-input: #2A2A2C;
    --x-color-ring: #AE9440;

    --x-color-bg-page: #0B0B0C;
    --x-color-bg-card: #161618;
    --x-color-bg-elevated: #2A2A2C;
    --x-color-bg-subtle: #161618;
    --x-color-bg-overlay: rgba(0, 0, 0, 0.6);

    --x-color-text-primary: #ffffff;
    --x-color-text-secondary: #A0A3A8;
    --x-color-text-disabled: #475569;
    --x-color-text-inverse: #0B0B0C;

    --x-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --x-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --x-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
    --x-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.3);

    --x-color-sidebar: #111114;
    --x-color-sidebar-foreground: #ffffff;
    --x-color-sidebar-primary: #AE9440;
    --x-color-sidebar-primary-foreground: #ffffff;
    --x-color-sidebar-accent: #AE9440;
    --x-color-sidebar-accent-foreground: #ffffff;
    --x-color-sidebar-border: rgba(174, 148, 64, 0.3);
    --x-color-sidebar-ring: #AE9440;

    --x-color-chart-1: #AE9440;
    --x-color-chart-2: #3C850E;
    --x-color-chart-3: #9C670B;
    --x-color-chart-4: #260EBC;
    --x-color-chart-5: #C82D2D;

    /* --- Primary tints (adjusted for dark surfaces) --- */
    --x-color-primary-tint-6: rgba(196, 169, 77, 0.06);
    --x-color-primary-tint-10: rgba(196, 169, 77, 0.10);
    --x-color-primary-tint-15: rgba(196, 169, 77, 0.15);
    --x-color-primary-tint-20: rgba(196, 169, 77, 0.20);

    /* --- Glass (white-based for dark) --- */
    --x-glass-6: rgba(255, 255, 255, 0.06);
    --x-glass-10: rgba(255, 255, 255, 0.10);
    --x-glass-12: rgba(255, 255, 255, 0.12);
    --x-glass-70: rgba(255, 255, 255, 0.70);
    --x-glass-75: rgba(255, 255, 255, 0.75);

    /* --- Overlay (darker for dark mode) --- */
    --x-overlay-20: rgba(0, 0, 0, 0.40);
    --x-overlay-50: rgba(0, 0, 0, 0.70);

    /* --- FigmaMake component colors --- */
    --x-color-reject: #f87171;
    --x-color-graphite: #e2e8f0;
    --x-color-divider: rgba(255, 255, 255, 0.08);
    --x-color-gold-accent: #e1bf52;
    --x-color-muted-text: #94a3b8;
    --x-color-emoji-border: rgba(255, 255, 255, 0.08);
    --x-color-pitch-bg: #1e293b;
    --x-color-chip-light: #2a2a2e;
    --x-color-chip-selected: #3b5a80;
    --x-color-chip-attribute: #1e3a5f;
    --x-color-progress-inactive: #2a2a2e;
    --x-color-disabled-text: #4a4a4e;
    --x-color-discover-banner: #1e293b;
    --x-color-sent-bubble: #2a3a4e;
    --x-color-received-bubble: #1e1e22;

    /* --- BeeScore --- */
    --x-color-beescore-value: #c4a94d;

    /* --- Score colors (bright on dark) --- */
    --x-score-excellent: #4ade80;
    --x-score-good: #c4a94d;
    --x-score-fair: #f59e0b;
    --x-score-low: #f87171;

    /* --- Trust badges (dark) --- */
    --x-color-trust-verified: #4ade80;
    --x-color-trust-vouched: #fbbf24;
    --x-color-trust-trusted: #93c5fd;

    /* --- Sidebar hover --- */
    --x-color-sidebar-hover: rgba(255, 255, 255, 0.08);
    --x-color-bg-hover: #1e1e22;

    /* --- Neutral scale (inverted for dark) --- */
    --x-color-neutral-50: #1e1e22;
    --x-color-neutral-100: #2a2a2e;
    --x-color-neutral-200: #3a3a3e;
    --x-color-neutral-300: #4a4a4e;

    /* --- Accessible gold (higher contrast on dark) --- */
    --x-color-primary-accessible: #d4b95d;

    /* --- Priority badge backgrounds (dark) --- */
    --x-color-priority-high-bg: #450a0a;
    --x-color-priority-low-bg: #172554;
    --x-color-priority-low-text: #93c5fd;

    /* --- Progress bar track (dark) --- */
    --x-color-progress-track: rgba(174, 148, 64, 0.15);

    /* --- Action button text (dark) --- */
    --x-color-action-text: #94a3b8;

    /* --- Card shadow (dark) --- */
    --x-color-card-shadow: rgba(0, 0, 0, 0.3);
}

} /* end @layer project-tokens */