/**
 * SkyDNS HR Portal — design tokens (Brand Guidelines).
 * Components should use semantic tokens, not raw hex.
 */

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

  /* Brand */
  --color-brand-primary: #204ab2;
  --color-brand-primary-hover: #1a3d96;
  --color-brand-accent: #76f1a3;
  --color-brand-secondary: #469df1;

  /* Raw palette (reference) */
  --palette-astro-blue: #204ab2;
  --palette-neon-green: #76f1a3;
  --palette-cloud-blue: #469df1;
  --palette-white-blue: #f0f6ff;
  --palette-white: #f9f9f9;
  --palette-white-green: #ecfef1;
  --palette-grass-green: #295d1d;
  --palette-dark-green: #1b422c;
  --palette-dark-blue: #162842;
  --palette-deep-purple: #400f54;
  --palette-amethyst: #7732b3;
  --palette-lavender: #cc8bfa;
  --palette-white-violet: #f3e5f7;
  --palette-deep-red: #6a1122;
  --palette-fire: #a12227;
  --palette-tango-red: #fb5853;
  --palette-white-red: #f8e3e3;

  /* Semantic surfaces */
  --color-surface: #ffffff;
  --color-surface-secondary: #f9f9f9;
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #f0f6ff;
  --color-surface-sidebar: #162842;
  --color-surface-header: #ffffff;

  /* Text */
  --color-text-primary: #162842;
  --color-text-secondary: rgba(22, 40, 66, 0.72);
  --color-text-muted: rgba(22, 40, 66, 0.52);
  --color-text-inverse: #f9f9f9;
  --color-text-on-brand: #ffffff;

  /* Borders & focus */
  --color-border: rgba(22, 40, 66, 0.12);
  --color-border-strong: rgba(22, 40, 66, 0.2);
  --color-focus: #469df1;

  /* Status */
  --color-success: #295d1d;
  --color-success-bg: #ecfef1;
  --color-warning: #a12227;
  --color-warning-bg: #f8e3e3;
  --color-danger: #fb5853;
  --color-danger-bg: #f8e3e3;

  /* Typography */
  --font-heading: "Play", "Segoe UI", sans-serif;
  --font-body: "Roboto", "Segoe UI", sans-serif;
  --font-weight-heading: 400;
  --font-weight-heading-bold: 700;
  --line-height-body: 1.3;
  --line-height-ui: 1.35;
  --line-height-heading: 1.15;

  /* Layout & chrome */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(22, 40, 66, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 40, 66, 0.08);
  --shadow-lg: 0 12px 32px rgba(22, 40, 66, 0.12);
  --sidebar-width: 252px;
  --header-height: 56px;

  /* Legacy aliases (gradual migration in skydns.css) */
  --astro-blue: var(--color-brand-primary);
  --astro-blue-hover: var(--color-brand-primary-hover);
  --cloud-blue: var(--color-brand-secondary);
  --neon-green: var(--color-brand-accent);
  --bg-app: var(--color-surface-secondary);
  --bg-surface: var(--color-surface);
  --bg-subtle: var(--color-surface-muted);
  --bg-muted: var(--palette-white-blue);
  --white-blue: var(--palette-white-blue);
  --white-green: var(--palette-white-green);
  --white: var(--palette-white);
  --dark-blue: var(--palette-dark-blue);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-muted);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --font-sans: var(--font-body);
  --font-display: var(--font-heading);
  --radius: var(--radius-md);
  --radius-xl: 20px;
  --shadow: var(--shadow-md);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-brand-primary: #469df1;
  --color-brand-primary-hover: #76f1a3;
  --color-brand-accent: #76f1a3;
  --color-brand-secondary: #469df1;

  --color-surface: #1e2f4a;
  --color-surface-secondary: #162842;
  --color-surface-elevated: #243552;
  --color-surface-muted: #1a2840;
  --color-surface-sidebar: #101c30;
  --color-surface-header: #162842;

  --color-text-primary: #f0f6ff;
  --color-text-secondary: rgba(240, 246, 255, 0.78);
  --color-text-muted: rgba(240, 246, 255, 0.55);
  --color-text-inverse: #162842;
  --color-text-on-brand: #ffffff;

  --color-border: rgba(240, 246, 255, 0.12);
  --color-border-strong: rgba(240, 246, 255, 0.22);
  --color-focus: #76f1a3;

  --color-success: #76f1a3;
  --color-success-bg: rgba(41, 93, 29, 0.35);
  --color-warning: #fb5853;
  --color-warning-bg: rgba(106, 17, 34, 0.45);
  --color-danger: #fb5853;
  --color-danger-bg: rgba(106, 17, 34, 0.45);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  --bg-app: var(--color-surface-secondary);
  --bg-surface: var(--color-surface);
  --bg-subtle: var(--color-surface-muted);
  --bg-muted: var(--color-surface-muted);
  --white-blue: var(--color-surface-muted);
}