/*
 * variables.css
 * Design tokens from Skilvana Style Guide (prototypes/2026/Skilvana Style Guide final.fig).
 * Machine-readable export: prototypes/2026/figma-tokens.json
 */

:root {
  /* Typography — Manrope on sk-* components only (see typography.css) */
  --font-brand: "Manrope", Arial, sans-serif;
  --font-body: var(--font-brand);

  --text-heading-1-size: 2.25rem;
  --text-heading-1-weight: 700;
  --text-heading-1-lh: 3rem;
  --text-heading-2-size: 1.5rem;
  --text-heading-2-weight: 600;
  --text-heading-2-lh: 2rem;
  --text-heading-3-size: 1.25rem;
  --text-heading-3-weight: 600;
  --text-heading-3-lh: 1.75rem;
  --text-heading-4-size: 1.125rem;
  --text-heading-4-weight: 600;
  --text-heading-4-lh: 1.5rem;
  --text-body-1-size: 1rem;
  --text-body-1-weight: 400;
  --text-body-1-lh: 1.5rem;
  --text-body-2-size: 0.875rem;
  --text-body-2-weight: 400;
  --text-body-2-lh: 1.5rem;
  --text-button-size: 1rem;
  --text-button-weight: 600;
  --text-button-lh: 1.25rem;
  --text-caption-size: 0.75rem;
  --text-caption-weight: 400;
  --text-caption-lh: 1.125rem;
  --text-label-size: 0.625rem;
  --text-label-weight: 600;
  --text-label-lh: 1rem;

  /* Color/base */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Color/accent — Website Applied Palette */
  --color-accent-900: #2563EB;
  --color-accent-800: #60A5FA;
  --color-accent-700: #BFDBFE;

  /* Color/neutrals */
  --color-neutral-900: #111827;
  --color-neutral-800: #374151;
  --color-neutral-700: #6B7280;
  --color-neutral-600: #9CA3AF;
  --color-neutral-500: #E5E7EB;
  --color-neutral-400: #F3F4F6;
  --color-neutral-300: #F8FAFB;

  /* Color/functional */
  --color-success-900: #22C55E;
  --color-success-800: #86EFAC;
  --color-success-700: #DCFCE7;
  --color-warning-900: #F59E0B;
  --color-warning-800: #FCD34D;
  --color-warning-700: #FEF3C7;
  --color-error-900: #EF4444;
  --color-error-800: #FCA5A5;
  --color-error-700: #FEE2E2;

  /* spacing/space-* */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 60px;
  --space-10: 72px;

  /* corner radius/corner radius-* */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 20px;
  --radius-5: 32px;
  --radius-pill: 1000px;

  /*
   * Website Applied Palette (Skilvana Style Guide)
   * Role-based tokens — skilvana-* naming convention.
   */
  --skilvana-page-background: var(--color-neutral-300);
  --skilvana-section-background: var(--color-white);
  --skilvana-primary-headings: var(--color-neutral-900);
  --skilvana-body-text: var(--color-neutral-700);
  --skilvana-links: var(--color-accent-900);
  --skilvana-links-hover: var(--color-accent-800);
  --skilvana-primary-cta: var(--color-accent-900);
  --skilvana-primary-cta-hover: var(--color-accent-800);
  --skilvana-secondary-cta: var(--color-neutral-900);
  --skilvana-secondary-cta-hover: var(--color-neutral-800);
  --skilvana-borders-dividers: var(--color-neutral-500);
  --skilvana-accent-moments: var(--color-accent-900);
  --skilvana-footer: var(--color-neutral-900);
  --skilvana-footer-text: var(--color-neutral-400);
  --skilvana-footer-link-muted: var(--color-neutral-600);
  --skilvana-auth-panel-gradient: linear-gradient(145deg, var(--color-neutral-900), var(--color-neutral-800));

  /* Semantic aliases (document workspace + app shell) */
  --radius-card: var(--radius-3);
  --radius-btn: var(--radius-2);
  --radius-input: var(--radius-2);
  --btn-padding: var(--space-2);

  --color-blue: var(--color-accent-900);
  --color-blue-hover: var(--skilvana-primary-cta-hover);
  --color-teal: var(--color-accent-800);
  --color-navy: var(--color-neutral-900);
  --dark-blue: var(--color-accent-900);
  --light-blue: var(--color-accent-700);
  --medium-blue: var(--color-accent-800);
  --accent: var(--skilvana-accent-moments);
  --accent-color: var(--skilvana-accent-moments);
  --accent-subtle-bg: color-mix(in srgb, var(--color-accent-900) 8%, transparent);

  --bg-page: var(--skilvana-page-background);
  --bg-card: var(--skilvana-section-background);
  --bg-card-raised: var(--color-neutral-400);
  --bg-input: var(--color-white);
  --bg-table-header: var(--color-neutral-400);
  --bg-btn-hover: var(--color-accent-700);

  --border: var(--skilvana-borders-dividers);
  --border-subtle: var(--color-neutral-500);
  --border-focus: var(--color-accent-900);

  --text: var(--skilvana-primary-headings);
  --text-muted: var(--skilvana-body-text);
  --text-dim: var(--color-neutral-600);

  --shadow-card: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-btn: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-modal: 0 20px 40px rgba(17, 24, 39, 0.12);

  --score-vpos-bg: var(--color-success-700);
  --score-pos-bg: color-mix(in srgb, var(--color-success-900) 15%, transparent);
  --score-neu-bg: var(--color-neutral-400);
  --score-neg-bg: color-mix(in srgb, var(--color-error-900) 12%, transparent);
  --score-vneg-bg: var(--color-error-700);

  --danger-bg: var(--color-error-700);
  --danger-border: var(--color-error-800);
  --danger-text: var(--color-error-900);
  --danger-hover-bg: var(--color-error-700);
  --danger-hover-border: var(--color-error-900);
  --danger-hover-text: var(--color-error-900);

  --error-bg: var(--color-error-700);
  --error-border: var(--color-error-800);
  --error-text: var(--color-error-900);

  --success-bg: var(--color-success-700);
  --success-text: var(--color-success-900);
  --warning-bg: var(--color-warning-700);
  --warning-text: var(--color-warning-900);

  --pill-checked-bg: var(--color-accent-700);
  --pill-checked-border: var(--color-accent-900);
  --pill-checked-text: var(--color-accent-900);

  --color-chip-inactive-bg: var(--color-neutral-400);
  --color-chip-inactive-border: var(--color-neutral-500);
  --color-chip-inactive-text: var(--color-neutral-800);
  --color-chip-selected-bg: var(--color-accent-700);
  --color-chip-selected-border: var(--color-accent-900);
  --color-chip-selected-text: var(--color-accent-900);
  --chat-user-bg: var(--skilvana-primary-cta);
  --chat-user-text: var(--color-white);
  --chat-ai-bg: var(--bg-card);
  --chat-ai-text: var(--text);
  --chat-bubble-radius: var(--radius-btn);
  --chat-input-border: 1px solid var(--skilvana-borders-dividers);
  --chat-container-bg: var(--bg-page);

  /* Button heights (Figma Buttons component) */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 52px;

  /* Legacy shell — mapped to design tokens */
  --white: var(--color-white);
  --bgcolor-sidebar: var(--color-neutral-400);
  --bgcolor-content: var(--color-white);
  --color-text-dark: var(--color-neutral-900);
  --color-text-light: var(--color-neutral-700);
  --bgcolor-sidebar-hover: var(--color-white);
  --progress-bar-color: var(--color-neutral-900);
  --color-gray-100: var(--color-neutral-400);
  --color-black-900: var(--color-neutral-900);
  --text-sm: clamp(14px, 1vw, 16px);
  --tracking-normal: 0.01em;

  /* Lesson rainbow accents — unchanged for lesson chrome */
  --rainbow-color1: #373956;
  --rainbow-color2: #5D4B67;
  --rainbow-color3: #893C5F;
  --rainbow-color4: #C64D68;
  --rainbow-color5: #F6934E;
  --rainbow-color6: #F4C64D;
}

.document-demo-page {
  --dark-blue: var(--color-accent-900);
  --accent: var(--color-accent-900);
}

[data-theme="dark"],
.document-demo-page.dark-mode {
  --bg-page: #0d1117;
  --bg-card: #19191b;
  --bg-card-raised: #1e1e22;
  --bg-input: #111116;
  --bg-table-header: #141418;
  --bg-btn-hover: #22222a;
  --border: #21262f;
  --border-subtle: #2a3040;
  --text: #efefef;
  --text-muted: #9da2b3;
  --text-dim: #555d70;
  --accent: var(--color-accent-800);
  --dark-blue: var(--color-accent-800);
  --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.50);
  --shadow-btn: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.color-palette-1 {
  --dark-blue: var(--color-accent-900);
  --accent-color: var(--color-accent-900);
  --progress-bar-color: var(--color-neutral-900);
  --color-text-dark: var(--color-neutral-900);
  --color-text-light: var(--color-neutral-700);
  --bgcolor-sidebar: var(--color-neutral-400);
  --bgcolor-content: var(--color-white);
  --bgcolor-sidebar-hover: var(--color-white);
  --chat-user-bg: var(--skilvana-primary-cta);
  --chat-user-text: var(--color-white);
  --chat-ai-bg: var(--bg-card);
  --chat-ai-text: var(--text);
  --chat-input-border: 1px solid var(--skilvana-borders-dividers);
  --chat-container-bg: var(--bg-page);
}