/* Design Tokens */

/* Inspired by React Rainbow, with configurable brand color */

@layer tokens {
  :root {
    /* ============================================
       BRAND COLOR - Emerald Green
       ============================================
       - hue: 160 (emerald green)
       - chroma: 0.18 (rich but not neon)
       - lightness: 50% (medium)
       - dark-lightness: 60% (brighter for dark backgrounds)
    */
    --color-brand-hue: 160;
    --color-brand-chroma: 0.18;
    --color-brand-lightness: 50%;
    --color-brand-dark-lightness: 60%;

    /* Derived brand colors (automatically calculated) */
    --color-brand: oklch(
      var(--color-brand-lightness) var(--color-brand-chroma)
        var(--color-brand-hue)
    );
    --color-brand-active: oklch(
      calc(var(--color-brand-lightness) - 5%) var(--color-brand-chroma)
        var(--color-brand-hue)
    );
    --color-brand-light: oklch(
      var(--color-brand-lightness) var(--color-brand-chroma)
        var(--color-brand-hue) / 0.2
    );

    /* ============================================
       SEMANTIC COLORS
       ============================================ */

    /* Success (teal/green) */
    --color-success: oklch(50% 0.18 170deg);
    --color-success-active: oklch(45% 0.18 170deg);
    --color-success-light: oklch(50% 0.18 170deg / 0.2);

    /* Error (red) */
    --color-error: oklch(55% 0.22 25deg);
    --color-error-active: oklch(50% 0.22 25deg);
    --color-error-light: oklch(55% 0.22 25deg / 0.2);

    /* Warning (yellow/orange) */
    --color-warning: oklch(58% 0.18 75deg);
    --color-warning-dark: oklch(45% 0.18 70deg);
    --color-warning-light: oklch(58% 0.18 75deg / 0.2);

    /* Info (blue) */
    --color-info: oklch(65% 0.15 240deg);
    --color-info-active: oklch(60% 0.15 240deg);
    --color-info-light: oklch(65% 0.15 240deg / 0.2);

    /* ============================================
       METRIC SENTIMENT COLORS
       ============================================
       For data visualization: "is this metric good or bad?"
       Separate from semantic colors (success/error) which
       indicate UI state: "did this operation succeed?"
    */

    /* Positive (uses brand color) */
    --color-positive: var(--color-brand);
    --color-positive-light: var(--color-brand-light);

    /* Negative (red, same as error for now) */
    --color-negative: oklch(55% 0.22 25deg);
    --color-negative-light: oklch(55% 0.22 25deg / 0.2);

    /* ============================================
       GRAYSCALE
       ============================================ */
    --color-gray-1: oklch(97% 0 0deg); /* Very light - backgrounds */
    --color-gray-2: oklch(88% 0 0deg); /* Light - borders */
    --color-gray-3: oklch(70% 0 0deg); /* Medium - secondary text */
    --color-gray-4: oklch(35% 0 0deg); /* Dark - labels/headers */
    --color-dark: oklch(20% 0 0deg); /* Almost black - main text */

    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --color-bg-main: oklch(100% 0 0deg); /* Pure white */
    --color-bg-secondary: oklch(98% 0 0deg); /* Off-white */
    --color-bg-highlight: oklch(96% 0 0deg); /* Light gray */
    --color-bg-disabled: var(--color-gray-1);

    /* ============================================
       SPACING SCALE
       ============================================ */
    --space-xxs: 0.25rem; /* 4px */
    --space-xs: 0.5rem; /* 8px */
    --space-sm: 0.75rem; /* 12px */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-xxl: 3rem; /* 48px */

    /* ============================================
       TYPOGRAPHY
       ============================================ */

    /* Font families */
    --font-sans:
      system-ui, -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial,
      sans-serif;
    --font-mono:
      ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas,
      monospace;

    /* Font sizes */
    --font-size-xs: 0.625rem; /* 10px */
    --font-size-sm: 0.75rem; /* 12px */
    --font-size-md: 0.875rem; /* 14px */
    --font-size-lg: 1rem; /* 16px */
    --font-size-xl: 1.25rem; /* 20px */

    /* Heading sizes */
    --font-size-heading-sm: 1rem; /* 16px */
    --font-size-heading-md: 1.25rem; /* 20px */
    --font-size-heading-lg: 1.5rem; /* 24px */
    --font-size-heading-xl: 2rem; /* 32px */

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

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

    /* ============================================
       BORDER RADIUS (Rainbow's signature rounded look)
       ============================================ */
    --radius-sm: 0.25rem; /* 4px - subtle rounding */
    --radius-md: 0.5rem; /* 8px - moderate rounding */
    --radius-lg: 0.875rem; /* 14px - cards, inputs */
    --radius-xl: 1.5rem; /* 24px - large elements */
    --radius-pill: 100px; /* Pill-shaped (buttons) */
    --radius-circle: 50%; /* Fully circular */

    /* ============================================
       SHADOWS (subtle depth)
       ============================================ */
    --shadow-sm: 0 0 2px 0 var(--color-gray-3);
    --shadow-md: 0 2px 4px 0 var(--color-gray-2);
    --shadow-lg: 0 2px 16px 0 oklch(20% 0 0deg / 0.2);
    --shadow-focus-brand: 0 0 0 3px var(--color-brand-light);
    --shadow-focus-error: 0 0 0 3px var(--color-error-light);

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ============================================
       COMPONENT SIZES
       ============================================ */

    /* Button heights */
    --button-height-sm: 1.775rem; /* 28px */
    --button-height-md: 2.375rem; /* 38px */
    --button-height-lg: 3.275rem; /* 52px */

    /* Input heights */
    --input-height-sm: 2rem; /* 32px */
    --input-height-md: 2.5rem; /* 40px */
    --input-height-lg: 3rem; /* 48px */

    /* Avatar sizes */
    --avatar-size-xs: 1.5rem; /* 24px */
    --avatar-size-sm: 2rem; /* 32px */
    --avatar-size-md: 2.5rem; /* 40px */
    --avatar-size-lg: 3.5rem; /* 56px */
    --avatar-size-xl: 5rem; /* 80px */
  }

  /* ============================================
     DARK MODE
     ============================================ */
  @media (prefers-color-scheme: dark) {
    :root {
      /* Invert backgrounds and text colors */
      --color-bg-main: oklch(20% 0 0deg);
      --color-bg-secondary: oklch(18% 0 0deg);
      --color-bg-highlight: oklch(25% 0 0deg);
      --color-dark: oklch(95% 0 0deg);

      /* Adjust grayscale for dark mode */
      --color-gray-1: oklch(25% 0 0deg);
      --color-gray-2: oklch(35% 0 0deg);
      --color-gray-3: oklch(55% 0 0deg);
      --color-gray-4: oklch(75% 0 0deg);

      /* Brand colors derived from variables (brighter for dark backgrounds) */
      --color-brand: oklch(
        var(--color-brand-dark-lightness) var(--color-brand-chroma)
          var(--color-brand-hue)
      );
      --color-brand-active: oklch(
        calc(var(--color-brand-dark-lightness) - 5%)
          var(--color-brand-chroma) var(--color-brand-hue)
      );
      --color-brand-light: oklch(
        var(--color-brand-dark-lightness) var(--color-brand-chroma)
          var(--color-brand-hue) / 0.2
      );

      /* Brighten semantic colors for dark mode */
      --color-success: oklch(65% 0.18 170deg);
      --color-success-active: oklch(60% 0.18 170deg);
      --color-success-light: oklch(65% 0.18 170deg / 0.2);
      --color-warning: oklch(75% 0.18 75deg);
      --color-warning-dark: oklch(70% 0.18 70deg);
      --color-warning-light: oklch(75% 0.18 75deg / 0.2);
      --color-error: oklch(70% 0.22 25deg);
      --color-error-active: oklch(65% 0.22 25deg);
      --color-error-light: oklch(70% 0.22 25deg / 0.2);
      --color-info: oklch(75% 0.15 240deg);
      --color-info-active: oklch(70% 0.15 240deg);
      --color-info-light: oklch(75% 0.15 240deg / 0.2);

      /* Metric sentiment colors follow brand/error in dark mode */
      --color-negative: oklch(70% 0.22 25deg);
      --color-negative-light: oklch(70% 0.22 25deg / 0.2);

      /* Slightly adjust shadows for dark mode */
      --shadow-sm: 0 0 2px 0 oklch(0% 0 0deg / 0.5);
      --shadow-md: 0 2px 4px 0 oklch(0% 0 0deg / 0.5);
      --shadow-lg: 0 2px 16px 0 oklch(0% 0 0deg / 0.4);
    }
  }
}