@import "./theme-tokens.css";

[data-theme="light"],
.ds-theme-light {
  color-scheme: light;

  /* Neutral Extremes - For cases where we need pure white/black regardless of theme */
  --grayscale-max-base: var(--neutral-white);
  --grayscale-max-inverted: var(--neutral-black);

  /* Semantic aliases for common use cases */
  --surface-pure: var(
    --neutral-white
  ); /* For cards, modals, overlays that need pure white */
  --text-extreme: var(--neutral-black); /* For maximum contrast text */
  --border-extreme: var(--neutral-black); /* For maximum contrast borders */

  /* Base Colors - Light Theme uses dark colors on light backgrounds */
  --background-primary: var(--neutral-5l);
  --background-secondary: var(--neutral-4l);
  --background-tertiary: var(--neutral-3l);
  --foreground-primary: var(--neutral-3d);
  --foreground-secondary: var(--neutral-2d);
  --foreground-muted: var(--neutral-1d);

  /* Surface Colors */
  --surface-primary: var(--neutral-5l);
  --surface-secondary: var(--neutral-4l);
  --surface-tertiary: var(--neutral-3l);
  --surface-elevated: var(--neutral-51);
  --surface-overlay: color-mix(in srgb, var(--neutral-5d) 20%, transparent);

  /* Interactive Colors - Using 2d-3d for excellent contrast on light backgrounds (VOC default) */
  --interactive-primary: var(--primary-2d);
  --interactive-primary-hover: color-mix(
    in srgb,
    var(--interactive-primary) 90%,
    var(--neutral-5l)
  );
  --interactive-primary-active: var(--primary-4d);
  --interactive-primary-disabled: color-mix(
    in srgb,
    var(--neutral-2l) 60%,
    var(--neutral-5l)
  );
  --focus-ring: var(--palette-blue-0);

  --interactive-secondary: var(--secondary-2d);
  --interactive-secondary-hover: color-mix(
    in srgb,
    var(--interactive-secondary) 90%,
    var(--neutral-5l)
  );
  --interactive-secondary-active: var(--secondary-4d);
  --interactive-secondary-disabled: color-mix(
    in srgb,
    var(--neutral-2l) 60%,
    var(--neutral-5l)
  );

  --interactive-accent: var(--accent-2d);
  --interactive-accent-hover: color-mix(
    in srgb,
    var(--interactive-accent) 90%,
    var(--neutral-5l)
  );
  --interactive-accent-active: var(--accent-4d);
  --interactive-accent-disabled: color-mix(
    in srgb,
    var(--neutral-2l) 60%,
    var(--neutral-5l)
  );

  /* Text Colors */
  --text-primary: var(--neutral-5d);
  --text-secondary: var(--neutral-3d);
  --text-muted: var(--neutral-2d);
  --text-disabled: var(--neutral-1d);
  --text-inverse: var(--neutral-5l);
  --text-inverse-secondary: var(--neutral-3l);
  --text-inverse-muted: var(--neutral-2l);
  --text-inverse-disabled: var(--neutral-1l);

  /* Border Colors */
  --border-primary: var(--neutral-3l);
  --border-secondary: var(--neutral-2l);
  --border-tertiary: var(--neutral-1l);
  --border-focus: color-mix(
    in srgb,
    var(--interactive-primary) 80%,
    var(--neutral-5l)
  );
  --border-error: var(--error-0b);
  --border-success: var(--success-0b);
  --border-warning: var(--warning-0b);

  /* Status Colors */
  --status-success: var(--success-1d);
  --status-success-background: var(--success-4l);
  --status-success-text: var(--success-2d);

  --status-warning: var(--warning-2d);
  --status-warning-background: var(--warning-3l);
  --status-warning-text: var(--warning-3d);

  --status-error: var(--error-2d);
  --status-error-background: var(--error-3l);
  --status-error-text: var(--error-3d);

  --status-info: var(--info-2d);
  --status-info-background: var(--info-3l);
  --status-info-text: var(--info-3d);

  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-heavy: rgba(0, 0, 0, 0.2);

  /* ─── Glass Materials (iOS-style, 5 tiers) ─── */
  --glass-highlight: var(--neutral-2d);

  /* Ultra Thin — decorative overlays, maximum background visibility */
  --glass-ultra-thin-tint: color-mix(
    in srgb,
    var(--neutral-5l) 10%,
    transparent
  );
  --glass-ultra-thin-blur: 4px;
  --glass-ultra-thin-border: color-mix(
    in srgb,
    var(--neutral-2d) 8%,
    transparent
  );
  --glass-ultra-thin-glow: color-mix(
    in srgb,
    var(--neutral-2d) 3%,
    transparent
  );

  /* Thin — secondary panels, floating controls, subtle glass */
  --glass-thin-tint: color-mix(in srgb, var(--neutral-5l) 30%, transparent);
  --glass-thin-blur: 8px;
  --glass-thin-border: color-mix(
    in srgb,
    var(--neutral-2d) 12%,
    transparent
  );
  --glass-thin-glow: color-mix(in srgb, var(--neutral-2d) 6%, transparent);

  /* Regular — auth cards, modals, popovers (default) */
  --glass-regular-tint: color-mix(in srgb, var(--neutral-5l) 50%, transparent);
  --glass-regular-blur: 12px;
  --glass-regular-border: color-mix(
    in srgb,
    var(--neutral-2d) 18%,
    transparent
  );
  --glass-regular-glow: color-mix(
    in srgb,
    var(--neutral-2d) 10%,
    transparent
  );

  /* Thick — sidebars, drawers, sheets (high legibility) */
  --glass-thick-tint: color-mix(in srgb, var(--neutral-5l) 75%, transparent);
  --glass-thick-blur: 20px;
  --glass-thick-border: color-mix(
    in srgb,
    var(--neutral-2d) 15%,
    transparent
  );
  --glass-thick-glow: color-mix(in srgb, var(--neutral-2d) 8%, transparent);

  /* Chrome — navigation bars, toolbars, tab bars (most opaque) */
  --glass-chrome-tint: color-mix(in srgb, var(--neutral-5l) 88%, transparent);
  --glass-chrome-blur: 24px;
  --glass-chrome-border: color-mix(
    in srgb,
    var(--neutral-2d) 12%,
    transparent
  );
  --glass-chrome-glow: color-mix(
    in srgb,
    var(--neutral-2d) 10%,
    transparent
  );

  /* Refraction layer (for Liquid Glass Tier 2 ::after effect) */
  --glass-refraction-tint: color-mix(
    in srgb,
    var(--neutral-2d) 5%,
    transparent
  );
  --glass-refraction-brightness: 115%;

  /* Overlay Utilities */
  --overlay-10: color-mix(in srgb, var(--neutral-5d) 10%, transparent);
  --overlay-20: color-mix(in srgb, var(--neutral-5d) 20%, transparent);
  --overlay-30: color-mix(in srgb, var(--neutral-5d) 30%, transparent);
  --overlay-40: color-mix(in srgb, var(--neutral-5d) 40%, transparent);
  --overlay-50: color-mix(in srgb, var(--neutral-5d) 50%, transparent);

  /* Palette Colors - Theme-aware (light = natural direction, dark = inverted) */
  --palette-brand1--5: var(--brand-welkin-5l);
  --palette-brand1--4: var(--brand-welkin-4l);
  --palette-brand1--3: var(--brand-welkin-3l);
  --palette-brand1--2: var(--brand-welkin-2l);
  --palette-brand1--1: var(--brand-welkin-1l);
  --palette-brand1-0: var(--brand-welkin-0b);
  --palette-brand1-1: var(--brand-welkin-1d);
  --palette-brand1-2: var(--brand-welkin-2d);
  --palette-brand1-3: var(--brand-welkin-3d);
  --palette-brand1-4: var(--brand-welkin-4d);
  --palette-brand1-5: var(--brand-welkin-5d);

  --palette-brand2--5: var(--brand-euphotic-5l);
  --palette-brand2--4: var(--brand-euphotic-4l);
  --palette-brand2--3: var(--brand-euphotic-3l);
  --palette-brand2--2: var(--brand-euphotic-2l);
  --palette-brand2--1: var(--brand-euphotic-1l);
  --palette-brand2-0: var(--brand-euphotic-0b);
  --palette-brand2-1: var(--brand-euphotic-1d);
  --palette-brand2-2: var(--brand-euphotic-2d);
  --palette-brand2-3: var(--brand-euphotic-3d);
  --palette-brand2-4: var(--brand-euphotic-4d);
  --palette-brand2-5: var(--brand-euphotic-5d);

  --palette-green--5: var(--success-5l);
  --palette-green--4: var(--success-4l);
  --palette-green--3: var(--success-3l);
  --palette-green--2: var(--success-2l);
  --palette-green--1: var(--success-1l);
  --palette-green-0: var(--success-0b);
  --palette-green-1: var(--success-1d);
  --palette-green-2: var(--success-2d);
  --palette-green-3: var(--success-3d);
  --palette-green-4: var(--success-4d);
  --palette-green-5: var(--success-5d);

  --palette-yellow--5: var(--warning-5l);
  --palette-yellow--4: var(--warning-4l);
  --palette-yellow--3: var(--warning-3l);
  --palette-yellow--2: var(--warning-2l);
  --palette-yellow--1: var(--warning-1l);
  --palette-yellow-0: var(--warning-0b);
  --palette-yellow-1: var(--warning-1d);
  --palette-yellow-2: var(--warning-2d);
  --palette-yellow-3: var(--warning-3d);
  --palette-yellow-4: var(--warning-4d);
  --palette-yellow-5: var(--warning-5d);

  --palette-red--5: var(--error-5l);
  --palette-red--4: var(--error-4l);
  --palette-red--3: var(--error-3l);
  --palette-red--2: var(--error-2l);
  --palette-red--1: var(--error-1l);
  --palette-red-0: var(--error-0b);
  --palette-red-1: var(--error-1d);
  --palette-red-2: var(--error-2d);
  --palette-red-3: var(--error-3d);
  --palette-red-4: var(--error-4d);
  --palette-red-5: var(--error-5d);

  --palette-blue--5: var(--info-5l);
  --palette-blue--4: var(--info-4l);
  --palette-blue--3: var(--info-3l);
  --palette-blue--2: var(--info-2l);
  --palette-blue--1: var(--info-1l);
  --palette-blue-0: var(--info-0b);
  --palette-blue-1: var(--info-1d);
  --palette-blue-2: var(--info-2d);
  --palette-blue-3: var(--info-3d);
  --palette-blue-4: var(--info-4d);
  --palette-blue-5: var(--info-5d);

  --palette-neutral--5: var(--neutral-5l);
  --palette-neutral--4: var(--neutral-4l);
  --palette-neutral--3: var(--neutral-3l);
  --palette-neutral--2: var(--neutral-2l);
  --palette-neutral--1: var(--neutral-1l);
  --palette-neutral-0: var(--neutral-0b);
  --palette-neutral-1: var(--neutral-1d);
  --palette-neutral-2: var(--neutral-2d);
  --palette-neutral-3: var(--neutral-3d);
  --palette-neutral-4: var(--neutral-4d);
  --palette-neutral-5: var(--neutral-5d);

  /* Legacy Support (for existing components) */
  --uc-ap-bg: var(--background);
  --uc-primary-bg: var(--surface-primary);
  --uc-secondary-bg: var(--surface-secondary);
  --uc-shadow-gray: var(--shadow-light);

  --uc-border-color: var(--border-primary);
  --uc-hover-color: var(--interactive-primary-hover);

  --uc-blue-gradient: linear-gradient(
    to right,
    var(--primary-4d),
    var(--primary-3d)
  );
  --uc-red: var(--accent-2d);

  --uc-text-color-primary: var(--text-primary);
  --uc-text-color-secondary: var(--text-secondary);
  --uc-text-color-muted: var(--text-muted);
}

/* ===== Brand override: Uniden — push interactive-primary to the dark end of the neutral ramp =====
   penumbra-2d is mid-grey (too light to read as the black brand), so use 4d→5d (charcoal→near-black).
   data-brand="uniden" + [data-theme="light"] out-specifies the default block above. */
[data-theme="light"][data-brand="uniden"],
.ds-theme-light[data-brand="uniden"] {
  --interactive-primary: var(--primary-4d);
  --interactive-primary-active: var(--primary-5d);
}