/**
 * Contentstack Platform SDK — Design Tokens
 * Sourced from @contentstack/venus-components, namespaced with --cs- prefix.
 */

:root {
  /* ── Brand Primary ── */
  --cs-color-brand-primary-base: #6c5ce7;
  --cs-color-brand-primary-medium: #9387ed;
  --cs-color-brand-primary-dark: #3e3871;
  --cs-color-brand-primary-darker: #5d50bf;
  --cs-color-brand-primary-light: #efedfc;

  /* ── Brand Secondary (Grays) ── */
  --cs-color-brand-secondary-lightest: #dde3ee;
  --cs-color-brand-secondary-lighter: #edf1f7;
  --cs-color-brand-secondary-light: #a9b6cb;
  --cs-color-brand-secondary-base: #647696;
  --cs-color-brand-secondary-medium: #c7d0e1;
  --cs-color-brand-secondary-dark: #475161;

  /* ── Status: Success ── */
  --cs-color-brand-success-base: #007a52;
  --cs-color-brand-success-dark: #00472f;
  --cs-color-brand-success-light: #f5fffc;

  /* ── Status: Warning ── */
  --cs-color-brand-warning-base: #d62400;
  --cs-color-brand-warning-dark: #701300;
  --cs-color-brand-warning-light: #ffeeeb;
  --cs-color-brand-warning-medium: #eb5646;

  /* ── Status: Attention ── */
  --cs-color-brand-attention-base: #ffae0a;
  --cs-color-brand-attention-dark: #704b00;
  --cs-color-brand-attention-light: #fff8eb;

  /* ── Status: Info ── */
  --cs-color-brand-info-base: #00b9e0;
  --cs-color-brand-info-dark: #003b47;
  --cs-color-brand-info-light: #f5fdff;

  /* ── Base Palette: Purple ── */
  --cs-color-base-purple-5: #6c5ce7;
  --cs-color-base-purple-10: #3e3871;
  --cs-color-base-purple-15: #efedfc;
  --cs-color-base-purple-20: #9387ed;
  --cs-color-base-purple-25: #5d50bf;

  /* ── Base Palette: Gray ── */
  --cs-color-base-gray-5: #edf1f7;
  --cs-color-base-gray-10: #a9b6cb;
  --cs-color-base-gray-15: #647696;
  --cs-color-base-gray-20: #475161;
  --cs-color-base-gray-25: rgba(160, 174, 192, 0.5);
  --cs-color-base-gray-30: #f5f5f5;
  --cs-color-base-gray-35: #c7d0e1;
  --cs-color-base-gray-40: #dde3ee;

  /* ── Base Palette: Green ── */
  --cs-color-base-green-5: #007a52;
  --cs-color-base-green-10: #00472f;
  --cs-color-base-green-15: #f5fffc;

  /* ── Base Palette: Orange ── */
  --cs-color-base-orange-5: #d62400;
  --cs-color-base-orange-10: #701300;
  --cs-color-base-orange-15: #ffeeeb;
  --cs-color-base-orange-20: #eb5646;

  /* ── Base Palette: Blue ── */
  --cs-color-base-blue-5: #00b9e0;
  --cs-color-base-blue-10: #003b47;
  --cs-color-base-blue-15: #f5fdff;

  /* ── Base Palette: Yellow ── */
  --cs-color-base-yellow-5: #ffae0a;
  --cs-color-base-yellow-10: #704b00;
  --cs-color-base-yellow-15: #fff8eb;

  /* ── Base Palette: Black & White ── */
  --cs-color-base-black-5: #222222;
  --cs-color-base-white-5: #ffffff;
  --cs-color-base-white-10: #f7f9fc;
  --cs-color-base-white-15: #f5f5f5;
  --cs-color-base-white-20: #f7f9fc;

  /* ── Font Colors ── */
  --cs-color-font-base: #475161;
  --cs-color-font-secondary: #647696;
  --cs-color-font-tertiary: #a9b6cb;
  --cs-color-font-quaternary: #edf1f7;
  --cs-color-font-link: #6c5ce7;
  --cs-color-font-active: #647696;
  --cs-color-font-warning: #d62400;
  --cs-color-font-attention: #ffae0a;
  --cs-color-font-success: #007a52;
  --cs-color-font-info: #00b9e0;
  --cs-color-font-disabled: rgba(160, 174, 192, 0.5);
  --cs-color-font-white: #ffffff;
  --cs-color-font-black: #222222;
  --cs-color-font-sonic-silver: #767676;
  --cs-color-font-tarmac-grey: #475161;
  --cs-color-font-gray-900: #212121;
  --cs-color-font-jet-black: #000000;
  --cs-color-font-purple-gray: #6e6b86;

  /* ── Border Colors ── */
  --cs-color-border-lighter: #f5f5f5;
  --cs-color-border-light: #a9b6cb;
  --cs-color-border-base: #647696;
  --cs-color-border-dark: #475161;
  --cs-color-border-link: #6c5ce7;
  --cs-color-border-focus: #edf1f7;
  --cs-color-border-warning: #d62400;
  --cs-color-border-success: #007a52;

  /* ── Background Colors ── */
  --cs-color-bg-lavender: #f8f6ff;
  --cs-color-bg-dolphin-grey: #dde3ee;
  --cs-color-bg-pure-white: #ffffff;
  --cs-color-bg-milkybar-white: #f7f9fc;
  --cs-color-bg-hibiscus: #ffeeeb;
  --cs-color-bg-cashew: #fff8eb;
  --cs-color-bg-algae: #f5fffc;
  --cs-color-bg-sky: #f5fdff;
  --cs-color-bg-tulip-purple: #f9f8ff;
  --cs-color-bg-lavender-blue: #fadeff;

  /* ── Accent Colors ── */
  --cs-color-accent-purple-50: #b6aef3;
  --cs-color-accent-medium-orchid: #bd59fa;
  --cs-color-accent-blue-chalk: #edebff;
  --cs-color-accent-pale-aqua: #bad4fb;
  --cs-color-accent-pastel-blue: #43b7c2;
  --cs-color-accent-bottle-green: #003a25;
  --cs-color-accent-aqua-deep: #00593b;
  --cs-color-accent-mint: #47b0aa;
  --cs-color-accent-summer-green: #90bba5;
  --cs-color-accent-bean: #4f0800;
  --cs-color-accent-rust-orange: #ba5800;
  --cs-color-accent-salmon-pink: #e57872;
  --cs-color-accent-crayola: #ffce6c;
  --cs-color-accent-sundown: #fdafa3;
  --cs-color-accent-butterscotch: #ffad48;

  /* ── Status Accent Colors ── */
  --cs-color-status-accent-poppy: #a31b00;
  --cs-color-status-accent-mango: #ffae0a;
  --cs-color-status-accent-spinach: #007a52;
  --cs-color-status-accent-aqua: #0469e3;
  --cs-color-status-accent-maximum-blue-purple: #ada4f4;

  /* ── Typography: Font Sizes ── */
  --cs-size-font-tiny: 0.6875rem;
  --cs-size-font-small: 0.75rem;
  --cs-size-font-medium: 0.8125rem;
  --cs-size-font-large: 0.875rem;
  --cs-size-font-xl: 1rem;
  --cs-size-font-2xl: 1.125rem;
  --cs-size-font-3xl: 1.375rem;
  --cs-size-font-4xl: 1.875rem;
  --cs-size-font-5xl: 2.25rem;
  --cs-size-font-6xl: 2.625rem;

  /* ── Typography: V2 Font Sizes ── */
  --cs-size-font-v2-small: 0.75rem;
  --cs-size-font-v2-medium: 0.875rem;
  --cs-size-font-v2-large: 1rem;
  --cs-size-font-v2-xl: 1.25rem;
  --cs-size-font-v2-2xl: 1.75rem;
  --cs-size-font-v2-3xl: 2.125rem;

  /* ── Typography: Font Weights ── */
  --cs-font-weight-regular: 400;
  --cs-font-weight-medium: 500;
  --cs-font-weight-semi-bold: 600;
  --cs-font-weight-bold: 700;
  --cs-font-weight-extra-bold: 800;

  /* ── Typography: Font Family ── */
  --cs-font-family-primary: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── Typography: Line Heights ── */
  --cs-line-height-default: 1.5;
  --cs-line-height-condensed: 1.25;
  --cs-line-height-reset: 1;

  /* ── Typography: Letter Spacing ── */
  --cs-letter-spacing-tight: 0.01em;
  --cs-letter-spacing-normal: 0.02em;

  /* ── Spacing ── */
  --cs-space-2: 0.125rem;
  --cs-space-4: 0.25rem;
  --cs-space-5: 0.3125rem;
  --cs-space-6: 0.375rem;
  --cs-space-8: 0.5rem;
  --cs-space-10: 0.625rem;
  --cs-space-12: 0.75rem;
  --cs-space-14: 0.875rem;
  --cs-space-15: 0.9375rem;
  --cs-space-16: 1rem;
  --cs-space-18: 1.125rem;
  --cs-space-20: 1.25rem;
  --cs-space-22: 1.375rem;
  --cs-space-24: 1.5rem;
  --cs-space-25: 1.5625rem;
  --cs-space-26: 1.625rem;
  --cs-space-28: 1.75rem;
  --cs-space-30: 1.875rem;
  --cs-space-32: 2rem;
  --cs-space-34: 2.125rem;
  --cs-space-35: 2.1875rem;
  --cs-space-36: 2.25rem;
  --cs-space-38: 2.375rem;
  --cs-space-40: 2.5rem;
  --cs-space-50: 3.125rem;
  --cs-space-60: 3.75rem;
  --cs-space-64: 4rem;
  --cs-space-80: 5rem;
  --cs-space-100: 6.25rem;
  --cs-space-120: 7.5rem;
  --cs-space-160: 10rem;
}

/* ── Dark Theme (explicit toggle) ── */
[data-theme="dark"] {
  /* Brand Primary — inverted luminance */
  --cs-color-brand-primary-base: #8577ef;
  --cs-color-brand-primary-medium: #6c5ce7;
  --cs-color-brand-primary-dark: #b5aef6;
  --cs-color-brand-primary-darker: #9387ed;
  --cs-color-brand-primary-light: #1e1a3a;

  /* Brand Secondary — inverted grays */
  --cs-color-brand-secondary-lightest: #1e2231;
  --cs-color-brand-secondary-lighter: #161925;
  --cs-color-brand-secondary-light: #5c6480;
  --cs-color-brand-secondary-base: #8891a8;
  --cs-color-brand-secondary-medium: #2a2f42;
  --cs-color-brand-secondary-dark: #d0d5df;

  /* Status — brighter for dark backgrounds */
  --cs-color-brand-success-base: #4ade80;
  --cs-color-brand-success-dark: #86efac;
  --cs-color-brand-success-light: #0d2818;

  --cs-color-brand-warning-base: #f87171;
  --cs-color-brand-warning-dark: #fca5a5;
  --cs-color-brand-warning-light: #2d0f0f;
  --cs-color-brand-warning-medium: #f87171;

  --cs-color-brand-attention-base: #fbbf24;
  --cs-color-brand-attention-dark: #fcd34d;
  --cs-color-brand-attention-light: #2d1f04;

  --cs-color-brand-info-base: #60a5fa;
  --cs-color-brand-info-dark: #93bbfd;
  --cs-color-brand-info-light: #0c1a2e;

  /* Base — dark neutrals */
  --cs-color-base-black-5: #f5f6f8;
  --cs-color-base-white-5: #0f1117;
  --cs-color-base-white-10: #161925;
  --cs-color-base-white-15: #1e2231;
  --cs-color-base-white-20: #161925;

  --cs-color-base-gray-5: #1e2231;
  --cs-color-base-gray-10: #5c6480;
  --cs-color-base-gray-15: #8891a8;
  --cs-color-base-gray-20: #d0d5df;
  --cs-color-base-gray-25: rgba(92, 100, 128, 0.5);
  --cs-color-base-gray-30: #1e2231;
  --cs-color-base-gray-35: #3b4157;
  --cs-color-base-gray-40: #2a2f42;

  /* Font Colors — lighter for dark backgrounds */
  --cs-color-font-base: #d0d5df;
  --cs-color-font-secondary: #8891a8;
  --cs-color-font-tertiary: #5c6480;
  --cs-color-font-quaternary: #2a2f42;
  --cs-color-font-link: #b5aef6;
  --cs-color-font-active: #8891a8;
  --cs-color-font-warning: #f87171;
  --cs-color-font-attention: #fbbf24;
  --cs-color-font-success: #4ade80;
  --cs-color-font-info: #60a5fa;
  --cs-color-font-disabled: rgba(92, 100, 128, 0.5);
  --cs-color-font-white: #0f1117;
  --cs-color-font-black: #f5f6f8;
  --cs-color-font-sonic-silver: #8891a8;
  --cs-color-font-tarmac-grey: #d0d5df;
  --cs-color-font-gray-900: #f5f6f8;
  --cs-color-font-jet-black: #f5f6f8;
  --cs-color-font-purple-gray: #b0b7c8;

  /* Border Colors */
  --cs-color-border-lighter: #1e2231;
  --cs-color-border-light: #3b4157;
  --cs-color-border-base: #5c6480;
  --cs-color-border-dark: #8891a8;
  --cs-color-border-link: #8577ef;
  --cs-color-border-focus: #2a2f42;
  --cs-color-border-warning: #f87171;
  --cs-color-border-success: #4ade80;

  /* Background Colors */
  --cs-color-bg-lavender: #1a1730;
  --cs-color-bg-dolphin-grey: #1e2231;
  --cs-color-bg-pure-white: #0f1117;
  --cs-color-bg-milkybar-white: #161925;
  --cs-color-bg-hibiscus: #2d0f0f;
  --cs-color-bg-cashew: #2d1f04;
  --cs-color-bg-algae: #0d2818;
  --cs-color-bg-sky: #0c1a2e;
  --cs-color-bg-tulip-purple: #161330;
  --cs-color-bg-lavender-blue: #2a1030;
}

/* ── Auto Dark Mode (OS preference fallback) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cs-color-brand-primary-base: #8577ef;
    --cs-color-brand-primary-medium: #6c5ce7;
    --cs-color-brand-primary-dark: #b5aef6;
    --cs-color-brand-primary-darker: #9387ed;
    --cs-color-brand-primary-light: #1e1a3a;

    --cs-color-brand-secondary-lightest: #1e2231;
    --cs-color-brand-secondary-lighter: #161925;
    --cs-color-brand-secondary-light: #5c6480;
    --cs-color-brand-secondary-base: #8891a8;
    --cs-color-brand-secondary-medium: #2a2f42;
    --cs-color-brand-secondary-dark: #d0d5df;

    --cs-color-brand-success-base: #4ade80;
    --cs-color-brand-success-dark: #86efac;
    --cs-color-brand-success-light: #0d2818;

    --cs-color-brand-warning-base: #f87171;
    --cs-color-brand-warning-dark: #fca5a5;
    --cs-color-brand-warning-light: #2d0f0f;
    --cs-color-brand-warning-medium: #f87171;

    --cs-color-brand-attention-base: #fbbf24;
    --cs-color-brand-attention-dark: #fcd34d;
    --cs-color-brand-attention-light: #2d1f04;

    --cs-color-brand-info-base: #60a5fa;
    --cs-color-brand-info-dark: #93bbfd;
    --cs-color-brand-info-light: #0c1a2e;

    --cs-color-base-black-5: #f5f6f8;
    --cs-color-base-white-5: #0f1117;
    --cs-color-base-white-10: #161925;
    --cs-color-base-white-15: #1e2231;
    --cs-color-base-white-20: #161925;

    --cs-color-base-gray-5: #1e2231;
    --cs-color-base-gray-10: #5c6480;
    --cs-color-base-gray-15: #8891a8;
    --cs-color-base-gray-20: #d0d5df;
    --cs-color-base-gray-25: rgba(92, 100, 128, 0.5);
    --cs-color-base-gray-30: #1e2231;
    --cs-color-base-gray-35: #3b4157;
    --cs-color-base-gray-40: #2a2f42;

    --cs-color-font-base: #d0d5df;
    --cs-color-font-secondary: #8891a8;
    --cs-color-font-tertiary: #5c6480;
    --cs-color-font-quaternary: #2a2f42;
    --cs-color-font-link: #b5aef6;
    --cs-color-font-active: #8891a8;
    --cs-color-font-warning: #f87171;
    --cs-color-font-attention: #fbbf24;
    --cs-color-font-success: #4ade80;
    --cs-color-font-info: #60a5fa;
    --cs-color-font-disabled: rgba(92, 100, 128, 0.5);
    --cs-color-font-white: #0f1117;
    --cs-color-font-black: #f5f6f8;
    --cs-color-font-sonic-silver: #8891a8;
    --cs-color-font-tarmac-grey: #d0d5df;
    --cs-color-font-gray-900: #f5f6f8;
    --cs-color-font-jet-black: #f5f6f8;
    --cs-color-font-purple-gray: #b0b7c8;

    --cs-color-border-lighter: #1e2231;
    --cs-color-border-light: #3b4157;
    --cs-color-border-base: #5c6480;
    --cs-color-border-dark: #8891a8;
    --cs-color-border-link: #8577ef;
    --cs-color-border-focus: #2a2f42;
    --cs-color-border-warning: #f87171;
    --cs-color-border-success: #4ade80;

    --cs-color-bg-lavender: #1a1730;
    --cs-color-bg-dolphin-grey: #1e2231;
    --cs-color-bg-pure-white: #0f1117;
    --cs-color-bg-milkybar-white: #161925;
    --cs-color-bg-hibiscus: #2d0f0f;
    --cs-color-bg-cashew: #2d1f04;
    --cs-color-bg-algae: #0d2818;
    --cs-color-bg-sky: #0c1a2e;
    --cs-color-bg-tulip-purple: #161330;
    --cs-color-bg-lavender-blue: #2a1030;
  }
}