/* ============================================================================
   DESIGN TOKENS: Single Source of Truth
   ============================================================================

   This file defines all design tokens used throughout the application.
   Organised by category: colours, spacing, typography, layout, and utility.

   Architecture:
   - LCH colour format for perceptual uniformity and dark mode support
   - Semantic naming: -darkest, -darker, -dark, -medium, -light, -lighter, -lightest
   - Spacing: calc-based multipliers from base unit
   - Logical properties: margin-inline, padding-block, etc. (i18n ready)

   ============================================================================ */

:root {
  /* =========================================================================
     COLOUR TOKENS: LCH Format (Lightness, Chroma, Hue)
     =========================================================================

     LCH advantages:
     - Perceptually uniform (equal steps = equal visual change)
     - Works with dark mode (invert lightness values)
     - Device-independent colour space
     - All modern browsers support oklch() function
  */

  /* Neutral Scale: Greyscale (no chroma) */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;

  /* Light Mode: Ink (text/foreground) */
  --lch-ink-darkest: 26% 0.05 264;
  --lch-ink-darker: 40% 0.026 262;
  --lch-ink-dark: 56% 0.014 260;
  --lch-ink-medium: 52% 0.010 258; /* WCAG AA: ~4.5:1 on white (was 66%, failing contrast) */
  --lch-ink-light: 84% 0.005 256;
  --lch-ink-lighter: 92% 0.003 254;
  --lch-ink-lightest: 96% 0.002 252;

  /* Light Mode: Neutral/Uncoloured */
  --lch-neutral-darkest: 26% 0.018 40;
  --lch-neutral-darker: 40.04% 0.0376 50.06;
  --lch-neutral-dark: 57.09% 0.0676 60.5;
  --lch-neutral-medium: 66% 0.0944 71.46;
  --lch-neutral-light: 83.97% 0.0457 80.84;
  --lch-neutral-lighter: 92% 0.014 90;
  --lch-neutral-lightest: 96% 0.012 100;

  /* Status Colours: Status-balanced (green) */
  --lch-success-darkest: 26% 0.071 149;
  --lch-success-darker: 40% 0.12 148;
  --lch-success-dark: 55% 0.162 147;
  --lch-success-medium: 66% 0.208 146;
  --lch-success-light: 83.92% 0.0772 145.06;
  --lch-success-lighter: 92% 0.044 144;
  --lch-success-lightest: 96% 0.022 143;

  /* Status Colours: Status-monitoring (amber) */
  --lch-warning-darkest: 26% 0.0729 40;
  --lch-warning-darker: 40% 0.12 50;
  --lch-warning-dark: 58% 0.156 60;
  --lch-warning-medium: 74% 0.184 70;
  --lch-warning-light: 84% 0.12 80;
  --lch-warning-lighter: 92% 0.076 90;
  --lch-warning-lightest: 96% 0.034 100;

  /* Status Colours: Status-overload (red) */
  --lch-error-darkest: 26% 0.105 34;
  --lch-error-darker: 40% 0.154 36;
  --lch-error-dark: 59% 0.19 38;
  --lch-error-medium: 66% 0.204 40;
  --lch-error-light: 84.08% 0.0837 41.96;
  --lch-error-lighter: 92% 0.03 44;
  --lch-error-lightest: 96% 0.013 46;

  /* Brand Colours: Primary (blue) */
  --lch-primary-darkest: 26% 0.126 264;
  --lch-primary-darker: 40% 0.166 262;
  --lch-primary-dark: 57.02% 0.1895 260.46;
  --lch-primary-medium: 66% 0.196 257.82;
  --lch-primary-light: 84.04% 0.0719 255.29;
  --lch-primary-lighter: 92% 0.026 254;
  --lch-primary-lightest: 96% 0.016 252;

  /* Brand Colours: Secondary (teal) */
  --lch-secondary-darkest: 26% 0.059 214;
  --lch-secondary-darker: 40% 0.093 212;
  --lch-secondary-dark: 55.5% 0.122 210;
  --lch-secondary-medium: 66% 0.152 208;
  --lch-secondary-light: 83.88% 0.0555 206.02;
  --lch-secondary-lighter: 92% 0.02 204;
  --lch-secondary-lightest: 96% 0.012 202;

  /* Semantic Colour Abstractions */
  --color-canvas: oklch(var(--lch-white));
  --color-ink: oklch(var(--lch-ink-darkest));
  --color-text: oklch(var(--lch-ink-darkest));
  --color-text-muted: oklch(var(--lch-ink-medium));
  --color-text-subtle: oklch(var(--lch-ink-light));
  --color-text-lighter: oklch(var(--lch-ink-lighter));

  --color-border: oklch(var(--lch-neutral-lighter));
  --color-border-subtle: oklch(var(--lch-neutral-lightest));
  --color-divider: oklch(var(--lch-neutral-lighter));

  --color-background-default: oklch(var(--lch-neutral-lightest));
  --color-background-secondary: oklch(var(--lch-neutral-lighter));

  --color-positive: oklch(var(--lch-success-dark));
  --color-warning: oklch(var(--lch-warning-dark));
  --color-negative: oklch(var(--lch-error-dark));

  --color-link: oklch(var(--lch-primary-dark));
  --color-link-hover: oklch(var(--lch-primary-darker));
  --color-link-visited: oklch(var(--lch-primary-darker));

  --color-selection: oklch(var(--lch-primary-lighter));
  --color-highlight: oklch(var(--lch-warning-lighter));

  --color-primary: oklch(var(--lch-primary-dark));
  --color-secondary: oklch(var(--lch-secondary-dark));

  /* Focus and accessibility colours */
  --color-focus: var(--color-primary);                         /* Focus indicator background */
  --color-text-inverse: oklch(var(--lch-white));              /* Text on dark backgrounds */

  /* =========================================================================
     SPACING SCALE: Logical Properties (i18n ready)
     =========================================================================

     Base unit: 1rem (16px, configurable)
     All other sizes calculated from base for consistency
  */

  --base-space: 1rem;
  --space-xs: calc(var(--base-space) * 0.25);      /* 0.25rem – 4px */
  --space-sm: calc(var(--base-space) * 0.5);       /* 0.5rem – 8px */
  --space-md: var(--base-space);                   /* 1rem – 16px */
  --space-lg: calc(var(--base-space) * 1.5);       /* 1.5rem – 24px */
  --space-xl: calc(var(--base-space) * 2);         /* 2rem – 32px */
  --space-2xl: calc(var(--base-space) * 3);        /* 3rem – 48px */
  --space-3xl: calc(var(--base-space) * 4);        /* 4rem – 64px */

  /* Logical spacing (horizontal/vertical rhythm) */
  --inline-space: 1ch;                              /* Based on typography width */
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);

  --block-space: 1rem;                              /* Vertical rhythm */
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);

  /* =========================================================================
     TYPOGRAPHY SCALE: Responsive sizes
     =========================================================================

     Naming: --text-[modifier]-[size]
     Modifiers: (none) = normal weight, semibold, bold
     Sizes: xx-small to xx-large
  */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: ui-serif, serif;
  --font-mono: ui-monospace, "Courier New", monospace;

  /* Desktop typography scale */
  --text-xx-small: 0.55rem;                         /* 8.8px */
  --text-x-small: 0.75rem;                          /* 12px */
  --text-small: 0.85rem;                            /* 13.6px */
  --text-normal: 1rem;                              /* 16px */
  --text-medium: 1.1rem;                            /* 17.6px */
  --text-large: 1.5rem;                             /* 24px */
  --text-x-large: 1.8rem;                           /* 28.8px */
  --text-xx-large: 2.5rem;                          /* 40px */

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.75;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* =========================================================================
     LAYOUT CONSTANTS
     =========================================================================
  */

  --main-width: 1400px;                             /* Max content width */
  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
  --grid-row-height: 64px;

  /* =========================================================================
     BORDERS & RADIUSES
     =========================================================================
  */

  --border-width: 1px;
  --border-style: solid;
  --border: var(--border-width) var(--border-style) var(--color-border);
  --border-subtle: var(--border-width) var(--border-style) var(--color-border-subtle);

  --radius-sm: 0.25rem;                             /* 4px */
  --radius-md: 0.5rem;                              /* 8px */
  --radius-lg: 0.75rem;                             /* 12px */
  --radius-full: 99rem;                             /* Pill buttons */

  /* =========================================================================
     SHADOWS: Layered depth system
     =========================================================================
  */

  --shadow-sm: 0 1px 2px oklch(var(--lch-black) / 0.05);
  --shadow-md: 0 4px 6px oklch(var(--lch-black) / 0.1);
  --shadow-lg: 0 10px 15px oklch(var(--lch-black) / 0.1), 0 4px 6px oklch(var(--lch-black) / 0.05);
  --shadow-xl: 0 20px 25px oklch(var(--lch-black) / 0.1), 0 10px 10px oklch(var(--lch-black) / 0.05);

  /* =========================================================================
     ACCESSIBILITY: Focus rings & keyboard navigation
     =========================================================================
  */

  --focus-ring-color: var(--color-link);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

  /* =========================================================================
     Z-INDEX SCALE: Explicit stacking context hierarchy
     =========================================================================

     Prevents z-index wars. Each layer is semantic and documented.
  */

  --z-base: 0;                                      /* Default stacking */
  --z-dropdown: 10;                                 /* Dropdowns, modals */
  --z-sticky: 20;                                   /* Sticky headers */
  --z-floating: 30;                                 /* Floating actions */
  --z-modal: 40;                                    /* Modal backdrops */
  --z-popover: 50;                                  /* Popovers, tooltips */
  --z-notification: 100;                            /* Toasts, alerts */
  --z-dialog: 110;                                  /* Full-screen dialogs */
  --z-top: 9999;                                    /* Emergency override */
  --z-above-all: var(--z-top);                      /* Alias for absolute top layer */

  /* =========================================================================
     ANIMATION & TRANSITIONS
     =========================================================================
  */

  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out-bounce: cubic-bezier(0.25, 1.25, 0.5, 1);

  /* =========================================================================
     RESPONSIVE BREAKPOINTS
     =========================================================================

     Mobile-first approach: stack by default, then expand
  */

  --breakpoint-sm: 640px;                           /* Small devices */
  --breakpoint-md: 768px;                           /* Tablets */
  --breakpoint-lg: 1024px;                          /* Desktops */
  --breakpoint-xl: 1280px;                          /* Large desktops */
  --breakpoint-2xl: 1536px;                         /* Extra-large */
}

/* =========================================================================
   DARK MODE: Perceptually adjusted palette
   =========================================================================

   Uses OKLCH lightness inversion + saturation adjustment for contrast
   Applied via: html[data-theme="dark"]
               or @media (prefers-color-scheme: dark)
*/

html[data-theme="dark"] {
  /* Canvas & background */
  --lch-white: 20% 0.0195 232.58;                   /* Inverted light background */
  --lch-neutral-lightest: 25% 0.0017 40;            /* Dark surface */
  --lch-neutral-lighter: 30% 0.012 50;
  --lch-neutral-light: 40% 0.0387 60;
  --lch-neutral-medium: 62% 0.0552 70;

  /* Text contrast inverted */
  --lch-ink-darkest: 96.02% 0.0034 260;             /* Light text */
  --lch-ink-darker: 86% 0.0061 260;
  --lch-ink-dark: 73.97% 0.009 260;
  --lch-ink-medium: 62% 0.0122 260;
  --lch-ink-light: 40% 0.0148 260;
  --lch-ink-lighter: 30% 0.0178 260;
  --lch-ink-lightest: 25% 0.0204 260;

  /* Colours adjusted for dark backgrounds */
  --lch-success-darkest: 96.12% 0.035 143;
  --lch-success-darker: 86% 0.082 144;
  --lch-success-dark: 73.99% 0.117 145;
  --lch-success-medium: 62% 0.1261 146;

  --lch-warning-darkest: 96% 0.056 100;
  --lch-warning-darker: 86% 0.103 90;
  --lch-warning-dark: 74.06% 0.136 80;
  --lch-warning-medium: 62.1% 0.146 70;

  --lch-error-darkest: 95.85% 0.0218 46;
  --lch-error-darker: 86% 0.086 44;
  --lch-error-dark: 73.95% 0.139 42;
  --lch-error-medium: 62% 0.154 40;

  --lch-primary-darkest: 95.93% 0.0217 252;
  --lch-primary-darker: 86% 0.068 254;
  --lch-primary-dark: 74% 0.1293 256;
  --lch-primary-medium: 62% 0.159 258;

  --lch-secondary-darkest: 96.15% 0.0244 202;
  --lch-secondary-darker: 86% 0.06 204;
  --lch-secondary-dark: 73.92% 0.095 206;
  --lch-secondary-medium: 62% 0.106 208;

  --color-canvas: oklch(var(--lch-white));
  --color-background-default: oklch(var(--lch-neutral-lightest));
  --color-background-secondary: oklch(var(--lch-neutral-lighter));
}

/* Dark mode fallback for system preference */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --lch-white: 20% 0.0195 232.58;
    --lch-neutral-lightest: 25% 0.0017 40;
    --lch-neutral-lighter: 30% 0.012 50;
    --lch-neutral-light: 40% 0.0387 60;
    --lch-neutral-medium: 62% 0.0552 70;

    --lch-ink-darkest: 96.02% 0.0034 260;
    --lch-ink-darker: 86% 0.0061 260;
    --lch-ink-dark: 73.97% 0.009 260;
    --lch-ink-medium: 62% 0.0122 260;
    --lch-ink-light: 40% 0.0148 260;
    --lch-ink-lighter: 30% 0.0178 260;
    --lch-ink-lightest: 25% 0.0204 260;

    --lch-success-darkest: 96.12% 0.035 143;
    --lch-success-darker: 86% 0.082 144;
    --lch-success-dark: 73.99% 0.117 145;
    --lch-success-medium: 62% 0.1261 146;

    --lch-warning-darkest: 96% 0.056 100;
    --lch-warning-darker: 86% 0.103 90;
    --lch-warning-dark: 74.06% 0.136 80;
    --lch-warning-medium: 62.1% 0.146 70;

    --lch-error-darkest: 95.85% 0.0218 46;
    --lch-error-darker: 86% 0.086 44;
    --lch-error-dark: 73.95% 0.139 42;
    --lch-error-medium: 62% 0.154 40;

    --lch-primary-darkest: 95.93% 0.0217 252;
    --lch-primary-darker: 86% 0.068 254;
    --lch-primary-dark: 74% 0.1293 256;
    --lch-primary-medium: 62% 0.159 258;

    --lch-secondary-darkest: 96.15% 0.0244 202;
    --lch-secondary-darker: 86% 0.06 204;
    --lch-secondary-dark: 73.92% 0.095 206;
    --lch-secondary-medium: 62% 0.106 208;

    --color-canvas: oklch(var(--lch-white));
    --color-background-default: oklch(var(--lch-neutral-lightest));
    --color-background-secondary: oklch(var(--lch-neutral-lighter));
  }
}

/* =========================================================================
   RESPONSIVE TYPOGRAPHY: Scale for mobile devices
   =========================================================================
*/

@media (max-width: 639px) {
  :root {
    --text-xx-small: 0.65rem;
    --text-x-small: 0.85rem;
    --text-small: 0.95rem;
    --text-normal: 1.1rem;
    --text-medium: 1.2rem;
    --text-large: 1.5rem;
    --text-x-large: 1.8rem;
    --text-xx-large: 2.5rem;
  }
}