// * -- ply color variables
@use "variables";

// Base color
$background-body: #f7f8f8;
$color-body: #222;
$color-headings: #000;
$border-color: #ccc;

// Button base colors and pre-computed hover/active states (Sass build-time)
$btn-primary-light: #0353e9;
$btn-primary-light-hover: #0347c6;
$btn-primary-light-active: #023eaf;
$btn-secondary-light: #393939;
$btn-secondary-light-hover: #303030;
$btn-secondary-light-active: #2b2b2b;
$btn-primary-dark: #4589ff;
$btn-primary-dark-hover: #619bff;
$btn-primary-dark-active: #73a6ff;
$btn-secondary-dark: #a8a8a8;
$btn-secondary-dark-hover: #b5b5b5;
$btn-secondary-dark-active: #bebebe;

// CSS Custom Properties for theming (light/dark)
// Inspired by IBM Carbon Design System color tokens

:root {
  // Background
  --ply-bg-body: #ffffff;
  --ply-bg-surface: #ffffff;
  --ply-bg-surface-alt: #f4f4f4;
  --ply-bg-muted: #e0e0e0;

  // Inverse surface = the body text color (flips opposite the body automatically).
  // Referencing the parent vars means a themer who changes the text color gets the
  // inverse surface for free, or can override these directly to manage independently.
  --ply-bg-inverse: var(--ply-color-body);
  --ply-layer-inverse-0: var(--ply-color-body);
  --ply-layer-inverse-1: var(--ply-color-secondary);

  // Absolute black — stays #000 in every mode/theme (intentionally not derived)
  --ply-color-black: #000000;

  // Text
  --ply-color-body: #161616;
  --ply-color-headings: #161616;
  --ply-color-secondary: #525252;
  --ply-color-muted: #767676;
  --ply-color-placeholder: #a8a8a8;
  --ply-color-text-inverse: #ffffff;


  // Borders
  --ply-border-color: #e0e0e0;
  --ply-border-strong: #8d8d8d;

  // Interactive
  --ply-color-link: var(--ply-btn-default-bg);
  --ply-color-link-hover: #{$btn-primary-light-hover};
  --ply-color-link-hover: color-mix(in oklch, var(--ply-btn-default-bg), black 15%);
  --ply-color-focus: #0f62fe;

  // Fields
  --ply-color-field-bg: var(--ply-bg-surface-alt);
  --ply-color-input-border: var(--ply-border-strong);
  --ply-color-input-bg: var(--ply-bg-surface-alt);
  --ply-color-error: var(--ply-red-1);
  --ply-color-success: var(--ply-green-1);

  // Code
  --ply-color-code-bg: var(--ply-bg-surface-alt);
  --ply-color-code-border: var(--ply-border-color);

  // Tables
  --ply-color-table-border: var(--ply-border-color);
  --ply-color-table-striped: #f4f4f4;
  --ply-color-table-stripped: var(--ply-color-table-striped); // deprecated alias
  --ply-color-table-hovered: #e8e8e8;

  // Accent (brand-neutral — for icons, badges, focus rings. Independent of button color.)
  --ply-color-accent: #{$btn-primary-light};

  // Buttons (hex fallback + color-mix for custom theme cascade)
  --ply-btn-default-bg: #{$btn-primary-light};
  --ply-btn-default-bg-hover: #{$btn-primary-light-hover};
  --ply-btn-default-bg-hover: color-mix(in oklch, var(--ply-btn-default-bg), black 15%);
  --ply-btn-default-bg-active: #{$btn-primary-light-active};
  --ply-btn-default-bg-active: color-mix(in oklch, var(--ply-btn-default-bg), black 25%);
  --ply-btn-secondary-bg: #{$btn-secondary-light};
  --ply-btn-secondary-bg-hover: #{$btn-secondary-light-hover};
  --ply-btn-secondary-bg-hover: color-mix(in oklch, var(--ply-btn-secondary-bg), black 15%);
  --ply-btn-secondary-bg-active: #{$btn-secondary-light-active};
  --ply-btn-secondary-bg-active: color-mix(in oklch, var(--ply-btn-secondary-bg), black 25%);

  // Border radius scale
  --ply-radius-none: 0;
  --ply-radius-xs: 0.125rem;   // 2px
  --ply-radius-sm: 0.25rem;    // 4px
  --ply-radius-md: 0.5rem;     // 8px
  --ply-radius-lg: 0.75rem;    // 12px
  --ply-radius-xl: 1rem;       // 16px
  --ply-radius-full: 9999px;   // pill / circle

  // Semantic component radius aliases — components consume these, themers can override either layer
  --ply-border-radius: var(--ply-radius-sm);
  --ply-btn-border-radius: var(--ply-radius-full);
  --ply-label-radius: var(--ply-radius-sm);    // labels: small radius by default
  --ply-badge-radius: var(--ply-radius-full);  // badges: pill by default

  // Control sizing scale — shared by inputs, buttons, selects, textareas so a given
  // size produces the same height across every form control. Height is emergent
  // (font-size + vertical padding + line-height), never a fixed dimension.
  --ply-control-font-lg: 1.125rem;   // 18px
  --ply-control-font:     1rem;       // 16px
  --ply-control-font-sm:  0.875rem;   // 14px
  --ply-control-font-xs:  0.75rem;    // 12px
  --ply-control-py-lg: 0.875rem;      // 14px
  --ply-control-py:     0.625rem;     // 10px
  --ply-control-py-sm:  0.375rem;     // 6px
  --ply-control-py-xs:  0.25rem;      // 4px
  --ply-control-px-lg: 2rem;          // 32px
  --ply-control-px:     1.5rem;       // 24px
  --ply-control-px-sm:  1rem;         // 16px
  --ply-control-px-xs:  0.75rem;      // 12px
  --ply-control-lh-lg: 1.75rem;       // 28px
  --ply-control-lh:     1.5rem;       // 24px
  --ply-control-lh-sm:  1.25rem;      // 20px
  --ply-control-lh-xs:  1rem;         // 16px
  --ply-input-radius: var(--ply-radius-sm);

  // Navigation
  --ply-nav-bg: var(--ply-bg-body);
  --ply-nav-color: var(--ply-color-body);
  --ply-nav-border: var(--ply-color-body);
  --ply-nav-hover: #e8e8e8;
  --ply-nav-active-color: #525252;

  // Layers (elevation)
  --ply-layer-0: var(--ply-bg-body);
  --ply-layer-1: var(--ply-bg-surface-alt);
  --ply-layer-2: var(--ply-bg-muted);
  --ply-layer-3: #c6c6c6;
  --ply-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ply-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.1);
  --ply-shadow-3: 0 4px 24px rgba(0, 0, 0, 0.12);

  // Glass
  --ply-bg-glass: rgba(255, 255, 255, 0.15);

  // Brand backgrounds (WCAG AA — same in both themes, dark saturated values)
  --ply-bg-blue: #0f62fe;
  --ply-bg-blue-hover: #0043ce;
  --ply-bg-blue-active: #002d9c;
  --ply-bg-red: #da1e28;
  --ply-bg-red-hover: #a2191f;
  --ply-bg-red-active: #750e13;
  --ply-bg-green: #198038;
  --ply-bg-green-hover: #0e6027;
  --ply-bg-green-active: #044317;
  --ply-bg-yellow: #f1c21b;
  --ply-bg-yellow-hover: #d2a106;
  --ply-bg-yellow-active: #b28600;

  // Color surfaces — pastel bg for cards, badges, alerts (theme-aware)
  --ply-blue-surface: #d3e3fb;
  --ply-red-surface: #f8d5d8;
  --ply-green-surface: #d5ecd9;
  --ply-yellow-surface: #fff4cc;
  --ply-indigo-surface: #e0e7ff;
  --ply-purple-surface: #ede9fe;
  --ply-pink-surface: #fce7f3;
  --ply-orange-surface: #ffedd5;
  --ply-teal-surface: #ccfbf1;
  --ply-cyan-surface: #cffafe;

  // Color borders — light tint borders for colored cards (theme-aware)
  --ply-blue-border: #92baf6;
  --ply-red-border: #ef969d;
  --ply-green-border: #96cfa1;
  --ply-yellow-border: #ffe480;
  --ply-indigo-border: #a5b4fc;
  --ply-purple-border: #c4b5fd;
  --ply-pink-border: #f9a8d4;
  --ply-orange-border: #fdba74;
  --ply-teal-border: #5eead4;
  --ply-cyan-border: #67e8f9;

  // Brand palette (WCAG AA — 4.5:1 vs text-inverse per mode)
  --ply-blue-1: #0f62fe;
  --ply-blue-2: #0043ce;
  --ply-blue-3: #002d9c;
  --ply-red-1: #da1e28;
  --ply-red-2: #a2191f;
  --ply-red-3: #750e13;
  --ply-green-1: #198038;
  --ply-green-2: #0e6027;
  --ply-green-3: #044317;
  --ply-yellow-1: #f1c21b;
  --ply-yellow-2: #d2a106;
  --ply-yellow-3: #b28600;
  --ply-indigo-1: #4f46e5;
  --ply-indigo-2: #3730a3;
  --ply-indigo-3: #312e81;
  --ply-purple-1: #7c3aed;
  --ply-purple-2: #6d28d9;
  --ply-purple-3: #5b21b6;
  --ply-pink-1: #be185d;
  --ply-pink-2: #9d174d;
  --ply-pink-3: #831843;
  --ply-orange-1: #c2410c;
  --ply-orange-2: #9a3412;
  --ply-orange-3: #7c2d12;
  --ply-teal-1: #0f766e;
  --ply-teal-2: #115e59;
  --ply-teal-3: #134e4a;
  --ply-cyan-1: #0e7490;
  --ply-cyan-2: #155e75;
  --ply-cyan-3: #164e63;

  // Typography
  --ply-font-body: #{variables.$font-family-base};
  --ply-font-heading: #{variables.$font-family-headings};
  --ply-font-mono: #{variables.$font-family-code};

  // Spacing
  --ply-space-xs: 0.25rem;
  --ply-space-sm: 0.5rem;
  --ply-space-md: 0.75rem;
  --ply-space: 1rem;           // 16px — the default ply spacing unit
  --ply-space-lg: 1.5rem;
  --ply-space-xl: 2rem;
  --ply-space-xxl: 3rem;
}

@mixin dark-theme {
  // Background — Carbon Gray 100
  --ply-bg-body: #161616;
  --ply-bg-surface: #262626;
  --ply-bg-surface-alt: #262626;
  --ply-bg-muted: #393939;

  // --ply-bg-inverse / --ply-layer-inverse-* / --ply-color-black are not redefined here:
  // the inverse vars reference --ply-color-body/secondary (which flip in this mixin), and
  // black is mode-independent.

  // Text
  --ply-color-body: #f4f4f4;
  --ply-color-headings: #f4f4f4;
  --ply-color-secondary: #c6c6c6;
  --ply-color-muted: #8d8d8d;
  --ply-color-placeholder: #6f6f6f;
  --ply-color-text-inverse: #161616;

  // Borders
  --ply-border-color: #393939;
  --ply-border-strong: #6f6f6f;

  // Interactive
  --ply-color-link: #{$btn-primary-dark};
  --ply-color-link-hover: #{$btn-primary-dark-hover};
  --ply-color-link-hover: color-mix(in oklch, #{$btn-primary-dark}, white 15%);
  --ply-color-focus: #0f62fe;

  // Tables (table-striped intentionally differs from surface-alt in dark)
  --ply-color-table-striped: #1c1c1c;
  --ply-color-table-stripped: var(--ply-color-table-striped); // deprecated alias
  --ply-color-table-hovered: #353535;

  // Accent
  --ply-color-accent: #{$btn-primary-dark};

  // Buttons (hex fallback + color-mix for custom theme cascade)
  --ply-btn-default-bg: #0f62fe;
  --ply-btn-default-bg-hover: #{$btn-primary-dark-hover};
  --ply-btn-default-bg-hover: color-mix(in oklch, var(--ply-btn-default-bg), white 15%);
  --ply-btn-default-bg-active: #{$btn-primary-dark-active};
  --ply-btn-default-bg-active: color-mix(in oklch, var(--ply-btn-default-bg), white 25%);
  --ply-btn-secondary-bg: #{$btn-secondary-dark};
  --ply-btn-secondary-bg-hover: #{$btn-secondary-dark-hover};
  --ply-btn-secondary-bg-hover: color-mix(in oklch, var(--ply-btn-secondary-bg), white 15%);
  --ply-btn-secondary-bg-active: #{$btn-secondary-dark-active};
  --ply-btn-secondary-bg-active: color-mix(in oklch, var(--ply-btn-secondary-bg), white 25%);
  --ply-btn-default-color: #fff;
  --ply-btn-secondary-color: #161616;
  --ply-btn-ghost-color: #{$btn-primary-dark};

  // Navigation (nav-hover and nav-active-color intentionally differ from structural tokens in dark)
  --ply-nav-hover: #353535;
  --ply-nav-active-color: #a8a8a8;
  --ply-layer-3: #525252;
  --ply-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.2);
  --ply-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.3);
  --ply-shadow-3: 0 4px 24px rgba(0, 0, 0, 0.4);

  // Glass
  --ply-bg-glass: rgba(38, 38, 38, 0.25);

  // Color surfaces — dark muted bg for cards, badges, alerts
  --ply-blue-surface: #1a2744;
  --ply-red-surface: #3b1c1e;
  --ply-green-surface: #1a2e1e;
  --ply-yellow-surface: #332b10;
  --ply-indigo-surface: #1e1b4b;
  --ply-purple-surface: #2e1065;
  --ply-pink-surface: #3b0a2a;
  --ply-orange-surface: #331a08;
  --ply-teal-surface: #132f2e;
  --ply-cyan-surface: #133040;

  // Color borders — medium-dark borders for colored cards
  --ply-blue-border: #1a52a5;
  --ply-red-border: #b2232f;
  --ply-green-border: #237f35;
  --ply-yellow-border: #cca000;
  --ply-indigo-border: #3730a3;
  --ply-purple-border: #5b21b6;
  --ply-pink-border: #9d174d;
  --ply-orange-border: #c2410c;
  --ply-teal-border: #0f766e;
  --ply-cyan-border: #0e7490;

  // Brand backgrounds (dark mode — same as light, saturated for contrast with white text)
  --ply-bg-blue: #0f62fe;
  --ply-bg-blue-hover: #0043ce;
  --ply-bg-blue-active: #002d9c;
  --ply-bg-red: #da1e28;
  --ply-bg-red-hover: #a2191f;
  --ply-bg-red-active: #750e13;
  --ply-bg-green: #198038;
  --ply-bg-green-hover: #0e6027;
  --ply-bg-green-active: #044317;
  --ply-bg-yellow: #f1c21b;
  --ply-bg-yellow-hover: #d2a106;
  --ply-bg-yellow-active: #b28600;

  // Brand palette (dark mode — lighter values, same levels)
  --ply-blue-1: #4589ff;
  --ply-blue-2: #78a9ff;
  --ply-blue-3: #a6c8ff;
  --ply-red-1: #ff8389;
  --ply-red-2: #fa4d56;
  --ply-red-3: #da1e28;
  --ply-green-1: #42be65;
  --ply-green-2: #6fdc8c;
  --ply-green-3: #a7f0ba;
  --ply-yellow-1: #f1c21b;
  --ply-yellow-2: #d2a106;
  --ply-yellow-3: #b28600;
  --ply-indigo-1: #818cf8;
  --ply-indigo-2: #a5b4fc;
  --ply-indigo-3: #c7d2fe;
  --ply-purple-1: #a78bfa;
  --ply-purple-2: #c4b5fd;
  --ply-purple-3: #ddd6fe;
  --ply-pink-1: #f472b6;
  --ply-pink-2: #f9a8d4;
  --ply-pink-3: #fbcfe8;
  --ply-orange-1: #fb923c;
  --ply-orange-2: #fdba74;
  --ply-orange-3: #fed7aa;
  --ply-teal-1: #2dd4bf;
  --ply-teal-2: #5eead4;
  --ply-teal-3: #99f6e4;
  --ply-cyan-1: #22d3ee;
  --ply-cyan-2: #67e8f9;
  --ply-cyan-3: #a5f3fc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    @include dark-theme;
  }
}

[data-theme="dark"] {
  @include dark-theme;
}

// High contrast mode

@mixin high-contrast-light {
  --ply-color-body: #000000;
  --ply-color-headings: #000000;
  --ply-color-secondary: #1a1a1a;
  --ply-color-muted: #333333;
  --ply-border-color: #000000;
  --ply-border-strong: #000000;
  --ply-color-link: #0000ee;
  --ply-color-link-hover: #0000cc;
  --ply-color-code-bg: #ffffff;
  --ply-color-code-border: #000000;
  --ply-color-focus: #000000;
  --ply-shadow-1: none;
  --ply-shadow-2: none;
  --ply-shadow-3: none;
  --ply-layer-1: #ffffff;
  --ply-layer-2: #ffffff;
  --ply-layer-3: #ffffff;
}

@mixin high-contrast-dark {
  --ply-color-body: #ffffff;
  --ply-color-headings: #ffffff;
  --ply-color-secondary: #e5e5e5;
  --ply-color-muted: #cccccc;
  --ply-border-color: #ffffff;
  --ply-border-strong: #ffffff;
  --ply-color-link: #6eb5ff;
  --ply-color-link-hover: #a6d0ff;
  --ply-color-code-bg: #000000;
  --ply-color-code-border: #ffffff;
  --ply-color-focus: #ffffff;
  --ply-shadow-1: none;
  --ply-shadow-2: none;
  --ply-shadow-3: none;
  --ply-layer-1: #161616;
  --ply-layer-2: #161616;
  --ply-layer-3: #161616;
}

@media (prefers-contrast: more) {
  :root {
    @include high-contrast-light;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    @include high-contrast-dark;
  }
}

@media (prefers-contrast: more) {
  [data-theme="dark"] {
    @include high-contrast-dark;
  }
}

// Colors
$color-gray: #e0e3e5;
$color-black: #0f0f0f;
$color-blue: #2575ed;
$color-red: #de2c3b;
$color-yellow: #ffc800;
$color-green: #1a7a32;
$color-white: #fff;

// Extended palette
$color-indigo: #4f46e5;
$color-purple: #7c3aed;
$color-pink: #db2777;
$color-orange: #ea580c;
$color-teal: #0d9488;
$color-cyan: #0891b2;

// Colors Dark
$color-gray-dark: #b3b6b7;
$color-black-dark: #000;
$color-blue-dark: #1a52a5;
$color-red-dark: #b2232f;
$color-yellow-dark: #cca000;
$color-green-dark: #237f35;
$color-indigo-dark: #3730a3;
$color-purple-dark: #5b21b6;
$color-pink-dark: #9d174d;
$color-orange-dark: #c2410c;
$color-teal-dark: #0f766e;
$color-cyan-dark: #0e7490;

// Colors Light
$color-gray-light: #f0f1f2;
$color-black-light: #363738;
$color-blue-light: #92baf6;
$color-red-light: #ef969d;
$color-yellow-light: #ffe480;
$color-green-light: #96cfa1;
$color-indigo-light: #a5b4fc;
$color-purple-light: #c4b5fd;
$color-pink-light: #f9a8d4;
$color-orange-light: #fdba74;
$color-teal-light: #5eead4;
$color-cyan-light: #67e8f9;

// Colors Pastel
$color-gray-pastel: #f7f8f8;
$color-black-pastel: #dadada;
$color-blue-pastel: #d3e3fb;
$color-red-pastel: #f8d5d8;
$color-yellow-pastel: #fff4cc;
$color-green-pastel: #d5ecd9;
$color-indigo-pastel: #e0e7ff;
$color-purple-pastel: #ede9fe;
$color-pink-pastel: #fce7f3;
$color-orange-pastel: #ffedd5;
$color-teal-pastel: #ccfbf1;
$color-cyan-pastel: #cffafe;

// Neutrals (gray scale)
$color-neutral-50: #fafafa;
$color-neutral-100: #f5f5f5;
$color-neutral-200: #e5e5e5;
$color-neutral-300: #d4d4d4;
$color-neutral-400: #a3a3a3;
$color-neutral-500: #737373;
$color-neutral-600: #525252;
$color-neutral-700: #404040;
$color-neutral-800: #262626;
$color-neutral-900: #171717;

// Table Color
$color-table-border: $border-color;
$color-table-striped: #f8f8f8;
$color-table-stripped: $color-table-striped; // deprecated alias
$color-table-hovered: #f4f4f4;

// Fieldset
$color-fieldset-border: #ccc;

// Code
$color-code-background: #f4f4f4;
$color-code-border: #d4d4d4;

// Blockquote
$color-blockquote-border: #ddd;

// Input
$color-input-border: #ccc;
$color-input-append-background: #f4f4f4;
$color-input-append-border: #d4d4d4;

// Links Color
$color-link: #134da5;
$color-link-hover: $color-red;