/*
 * Dentria visual foundations.
 *
 * Hierarchy:
 *   1. Brand tokens are immutable corporate colors.
 *   2. Semantic tokens describe intent and are the public API for components.
 *   3. Functional tokens retain status meaning independently of the brand.
 *   4. Legacy aliases are temporary and must not be used in new templates.
 *
 * Accessibility rules:
 *   - Primary teal surfaces use navy text, never small white text.
 *   - Links use the darker accessible teal, not the brand teal directly.
 *   - Clinical, financial, chart, odontogram, staff, room and configurable tag
 *     colors remain outside this brand layer.
 */

:root,
[data-bs-theme="light"] {
  /* Corporate palette: define these six tokens only in this file. */
  --dentria-navy: #0B1D3A;
  --dentria-teal: #00B5A6;
  --dentria-mint: #E6F7F6;
  --dentria-gray-200: #E5E9EF;
  --dentria-slate: #516173;
  --dentria-white: #FFFFFF;

  --font-sans: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-display: clamp(3rem, 6vw, 5.6rem);
  --font-size-h1: clamp(2.6rem, 5vw, 4.8rem);
  --font-size-h2: clamp(2rem, 3.6vw, 3.25rem);
  --font-size-h3: clamp(1.18rem, 1.5vw, 1.45rem);
  --font-size-body-large: 1.08rem;
  --font-size-caption: .75rem;
  --font-size-body: .875rem;
  --line-height-body: 1.5;
  --line-height-display: 1.02;
  --line-height-heading: 1.12;
  --font-weight-regular: 450;
  --font-weight-medium: 600;
  --font-weight-semibold: 700;
  --font-weight-bold: 800;
  --control-height: 40px;
  --control-height-compact: 36px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-panel: 22px;
  --radius-hero: 30px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 24px rgba(11, 29, 58, .06);
  --shadow-float: 0 22px 58px rgba(11, 29, 58, .12);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 24%, transparent);
  --motion-ui: 180ms ease;
  --content-width: 1240px;
  --content-gutter: clamp(20px, 4vw, 60px);

  /* Semantic colors. */
  --color-bg: var(--dentria-white);
  --color-surface: var(--dentria-white);
  --color-surface-muted: var(--dentria-mint);
  --color-text-primary: var(--dentria-navy);
  --color-text-secondary: var(--dentria-slate);
  --color-border: var(--dentria-gray-200);
  --color-border-strong: #C8D0DA;
  --color-primary: var(--dentria-teal);
  --color-primary-hover: #00A093;
  --color-primary-active: #009589;
  --color-primary-text: var(--dentria-navy);
  --color-focus-ring: #007F75;
  --color-link: #007F75;
  --color-link-hover: #00685F;
  --color-disabled-bg: var(--dentria-gray-200);
  --color-disabled-text: var(--dentria-slate);
  --color-nav-bg: var(--dentria-navy);
  --color-nav-text: var(--dentria-white);
  --color-nav-active: var(--dentria-teal);

  /* Functional states: do not remap these to brand colors. */
  --color-success: #15803D;
  --color-success-soft: #DCFCE7;
  --color-warning: #92400E;
  --color-warning-soft: #FEF3C7;
  --color-danger: #B91C1C;
  --color-danger-soft: #FEE2E2;
  --color-info: #0369A1;
  --color-info-soft: #E0F2FE;

  /* Temporary aliases for global variables currently consumed by base.html. */
  --app-surface: var(--color-surface);
  --app-surface-soft: var(--color-surface-muted);
  --app-border: var(--color-border);
  --app-border-strong: var(--color-border-strong);
  --app-text: var(--color-text-primary);
  --app-muted: var(--color-text-secondary);
  --app-primary: var(--color-primary);
  --app-primary-dark: var(--color-primary-hover);
  --app-primary-soft: color-mix(in srgb, var(--color-primary) 12%, transparent);

  /* Temporary Dentria aliases used by legacy global and module selectors. */
  --dentria-soft: var(--color-surface-muted);
  --dentria-line: var(--color-border);
  --dentria-text: var(--color-text-primary);
  --dentria-muted: var(--color-text-secondary);
  --dentria-night: var(--dentria-navy);
  --dentria-petrol: var(--dentria-navy);
  --dentria-aqua: var(--color-link);
  --dentria-aqua-bright: var(--color-link-hover);
  --dentria-tech: var(--color-link);
  --dentria-tech-strong: var(--color-link-hover);
  --dentria-tech-soft: color-mix(in srgb, var(--dentria-teal) 12%, transparent);
  --dentria-tech-border: color-mix(in srgb, var(--dentria-teal) 32%, transparent);
  --dentria-clinical: var(--dentria-gray-200);
}