/* ============================================================
   National Datacare Design System — Tokens
   colors_and_type.css
   
   Usage: import this file first; then apply via CSS vars.
   Built on shadcn/Tailwind conventions; maps to CSS custom
   properties for runtime theming across Operational + Guided
   experience profiles.
   ============================================================ */

/* Brand fonts — self-hosted */
@font-face {
  font-family: 'Merriweather';
  src: url('fonts/Merriweather-VariableFont_opsz_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('fonts/Merriweather-Italic-VariableFont_opsz_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* All three brand fonts now self-hosted — no Google Fonts dependencies */

/* ============================================================
   COLOR PRIMITIVES — raw palette (not for direct use in UI)
   Source: NDC internal color spec (Deep Navy + Crimson theme)
   ============================================================ */
:root {
  /* NDC Red — Primary action, brand accent */
  --ndc-red:        #c41e3a;   /* Buttons, links, CTAs — ≤10% surface area */
  --ndc-red-dark:   #8d1829;   /* Hover / pressed state */
  --ndc-red-tint:   #fde8ec;   /* BG ONLY — alert/badge backgrounds, never text */

  /* NDC Navy — Structural anchor */
  --ndc-navy-dark:  #0f1a2e;   /* Primary body text, 16.6:1 on bg */
  --ndc-navy:       #1a2744;   /* Header / sidebar bg, 17.5:1 on white */
  --ndc-navy-mid:   #253459;   /* Active nav, accent fills */
  --ndc-navy-muted: #3d5475;   /* Secondary / muted text, 7.71:1 on white */

  /* Cool Surfaces — blue-white neutrals derived from navy */
  --surface-bg:     #f4f6f9;   /* App / page canvas */
  --surface-card:   #ffffff;   /* Cards, modals */
  --surface-muted:  #e2e8f2;   /* Tab bars, input bg */
  --surface-border: #c8d4e4;   /* Dividers, outlines */

  /* Semantic status primitives */
  --color-destructive-bg:  #b91c1c;   /* Error: 9.47:1 AAA with white */
  --color-success-bg:      #166534;   /* Success: 8.59:1 AAA with white */
  --color-warning-bg:      #92400e;   /* Warning: 8.32:1 AAA with white */

  /* Teal — Care / Health domain signal only (not primary brand) */
  --teal-500: #06B6D4;
  --teal-600: #0891B2;
  --teal-700: #0E7490;
  --teal-50:  #ECFEFF;
  --teal-100: #CFFAFE;
  --teal-200: #A5F3FC;

  /* Purple — Well-being / Engagement domain */
  --purple-600: #9333EA;
  --purple-700: #7E22CE;
  --purple-50:  #FAF5FF;
  --purple-100: #F3E8FF;
  --purple-200: #E9D5FF;

  /* Iris — AI / assistive layer signal only. Deliberately quiet:
     AI in NDC is ambient ("a layer, not a feature"), so this accent
     appears only on the small assist marker + suggestion surfaces,
     never as a fill across a panel. Distinct from Spiritual blue
     (#1D4ED8) and Care teal. */
  --iris-700: #4338ca;   /* AI text + marker, 8.3:1 AAA on white */
  --iris-600: #4f46e5;   /* AI dot / sparkle marker */
  --iris-200: #c7d2fe;   /* AI surface border */
  --iris-100: #e0e7ff;   /* AI chip / suggestion tint */
  --iris-50:  #eef2ff;   /* AI surface bg (subtle) */

  /* ─── Well-being Wheel ─────────────────────────────────────
     6-color category palette for activity categorization in
     the Enrichment / Engagement product. Each category has a
     foreground (text on light), background (tile / chip), and
     dot (small UI markers) variant. Use these — never alias
     them to brand colors elsewhere. ──────────────────────── */

  /* Physical — Teal */
  --cat-physical-fg:    #0E7490;
  --cat-physical-bg:    #ECFEFF;
  --cat-physical-chip:  #CFFAFE;
  --cat-physical-dot:   #0891B2;

  /* Cognitive — NDC Red (the only category that uses brand red) */
  --cat-cognitive-fg:   #c41e3a;
  --cat-cognitive-bg:   #fde8ec;
  --cat-cognitive-chip: #fde8ec;
  --cat-cognitive-dot:  #c41e3a;

  /* Social — Warm Amber */
  --cat-social-fg:      #92400e;
  --cat-social-bg:      #fef3c7;
  --cat-social-chip:    #fef3c7;
  --cat-social-dot:     #d97706;

  /* Creative — Purple */
  --cat-creative-fg:    #7E22CE;
  --cat-creative-bg:    #F3E8FF;
  --cat-creative-chip:  #E9D5FF;
  --cat-creative-dot:   #9333EA;

  /* Spiritual — Blue */
  --cat-spiritual-fg:   #1D4ED8;
  --cat-spiritual-bg:   #DBEAFE;
  --cat-spiritual-chip: #DBEAFE;
  --cat-spiritual-dot:  #2563EB;

  /* Purposeful — Green */
  --cat-purposeful-fg:   #166534;
  --cat-purposeful-bg:   #DCFCE7;
  --cat-purposeful-chip: #DCFCE7;
  --cat-purposeful-dot:  #16A34A;

  /* Legacy slate aliases (for backwards compat in components) */
  --slate-50:  #f4f6f9;
  --slate-100: #e2e8f2;
  --slate-200: #c8d4e4;
  --slate-300: #a0b0c8;
  --slate-400: #6b7fa0;
  --slate-500: #3d5475;
  --slate-600: #253459;
  --slate-700: #1a2744;
  --slate-800: #0f1a2e;
  --slate-900: #0a1020;
}

/* ============================================================
   SEMANTIC TOKENS — use these in UI components
   Maps to shadcn CSS variable conventions
   ============================================================ */
:root {
  /* ── Core interactive (NDC Red) ── */
  --color-primary:          var(--ndc-red);         /* #c41e3a — buttons, CTAs */
  --color-primary-hover:    var(--ndc-red-dark);    /* #8d1829 — hover/pressed */
  --color-primary-fg:       #ffffff;                /* white on red */
  --color-primary-muted:    var(--ndc-red-tint);    /* #fde8ec — bg tint only */

  /* ── Secondary (NDC Navy) ── */
  --color-secondary:        var(--ndc-navy);        /* #1a2744 — nav, sidebar */
  --color-secondary-hover:  var(--ndc-navy-mid);    /* #253459 */
  --color-secondary-fg:     #ffffff;

  /* ── Backgrounds ── */
  --bg-canvas:    var(--surface-bg);    /* #f4f6f9 — app/page */
  --bg-surface:   var(--surface-card);  /* #ffffff — cards, modals */
  --bg-subtle:    var(--surface-muted); /* #e2e8f2 — inputs, tab bars */
  --bg-overlay:   rgba(15, 26, 46, 0.5);

  /* ── Foreground / Text ── */
  --fg-primary:   var(--ndc-navy-dark);   /* #0f1a2e — body text */
  --fg-secondary: var(--ndc-navy-muted);  /* #3d5475 — helper/caption */
  --fg-tertiary:  #6b7fa0;
  --fg-disabled:  var(--surface-border);
  --fg-inverse:   #ffffff;
  --fg-brand:     var(--ndc-red);

  /* ── Borders ── */
  --border-default: var(--surface-border); /* #c8d4e4 */
  --border-strong:  #a0b0c8;
  --border-focus:   var(--ndc-red);        /* red focus ring on interactive */

  /* ── Semantic Status ── */
  /* -bg primitives live in the COLOR PRIMITIVES block; referenced here */
  --color-success:        var(--color-success-bg);
  --color-success-light:  #f0fdf4;
  --color-success-border: #bbf7d0;

  --color-warning:        var(--color-warning-bg);
  --color-warning-light:  #fffbeb;
  --color-warning-border: #fde68a;

  --color-danger:         var(--color-destructive-bg);
  --color-danger-bg:      var(--color-destructive-bg); /* #b91c1c — AAA 9.47:1 */
  --color-danger-light:   #fef2f2;
  --color-danger-border:  #fecaca;

  --color-info:           var(--teal-600);
  --color-info-bg:        var(--teal-50);
  --color-info-border:    var(--teal-200);

  /* ── Domain Colors ── */
  --color-finance:        var(--ndc-navy);
  --color-finance-bg:     #eef2f8;
  --color-compliance:     #92400e;
  --color-compliance-bg:  #fffbeb;
  --color-wellbeing:      var(--purple-600);   /* legacy alias — prefer --product-enrichment */
  --color-wellbeing-bg:   var(--purple-50);
  --color-care:           var(--teal-700);
  --color-care-bg:        var(--teal-50);

  /* ── Product Accents ──
     One accent per NDC product — login screens, product switcher,
     marketing panels, subdomain theming. `-deep` for gradients &
     hover, `-tint` for light backgrounds (never text). DDMS and
     StatBill inherit Finance navy until assigned their own. */
  --product-rfms:            var(--ndc-red);      /* #c41e3a — rfms.nationaldatacare.com */
  --product-rfms-deep:       var(--ndc-red-dark); /* #8d1829 */
  --product-rfms-tint:       var(--ndc-red-tint); /* #fde8ec */

  --product-guardian:        #0d6e3f;   /* Exact GPS — guardian.nationaldatacare.com */
  --product-guardian-deep:   #095230;
  --product-guardian-tint:   #e7f6ee;

  --product-compliance:      #92400e;   /* compliance.nationaldatacare.com */
  --product-compliance-deep: #713208;
  --product-compliance-tint: #fef3c7;

  --product-enrichment:      #7e22ce;   /* formerly "Engagement & Well-being" — enrichment.nationaldatacare.com */
  --product-enrichment-deep: #6b21a8;
  --product-enrichment-tint: #f3e8ff;

  --product-family:          var(--ndc-navy);      /* Family Access Portal */
  --product-family-deep:     var(--ndc-navy-dark);
  --product-family-tint:     #eef2f8;

  --product-app:             var(--ndc-navy);      /* app.nationaldatacare.com hub */

  /* ── Interactive / Link ── */
  --color-interactive:       var(--ndc-red);
  --color-interactive-hover: var(--ndc-red-dark);
  --color-link:              var(--ndc-red);
  --color-link-hover:        var(--ndc-red-dark);

  /* ── AI / assistive layer (ambient — use sparingly) ── */
  --color-ai:        var(--iris-700);   /* assist marker + suggestion text */
  --color-ai-marker: var(--iris-600);   /* sparkle / dot */
  --color-ai-bg:     var(--iris-50);    /* suggestion surface bg */
  --color-ai-tint:   var(--iris-100);   /* suggestion chip tint */
  --color-ai-border: var(--iris-200);   /* suggestion surface border */

  /* ── Feedback / loading (skeletons, optimistic, validation) ── */
  --skeleton-base:  #e2e8f2;            /* skeleton block fill */
  --skeleton-sheen: #f1f5f9;            /* shimmer highlight */
  --feedback-delay: 200ms; /* @kind other */ /* show feedback within this window of an action */

  /* ── Shadows (focus uses red ring) ── */
  --shadow-focus: 0 0 0 3px rgba(196, 30, 58, 0.25);
}

/* ============================================================
   ELEVATION / SHADOWS
   ============================================================ */
:root {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-card:   var(--shadow-sm);
  --shadow-modal:  var(--shadow-xl);
  /* --shadow-focus is defined once, in the SEMANTIC TOKENS block (red ring) */
}

/* ============================================================
   BORDER RADIUS
   ============================================================ */
:root {
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* Component-specific */
  --radius-card:   var(--radius-lg);
  --radius-button: var(--radius-md);
  --radius-input:  var(--radius-md);
  --radius-badge:  var(--radius-full);
  --radius-dialog: var(--radius-xl);
  --radius-tooltip: var(--radius-sm);
}

/* ============================================================
   SPACING SCALE
   ============================================================ */
:root {
  --space-0:   0px;
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
}

/* ============================================================
   TYPOGRAPHY — Font Families
   ============================================================ */
:root {
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* ============================================================
   TYPOGRAPHY — Scale
   ============================================================ */
:root {
  /* Heading sizes — Merriweather */
  --text-h1:  3rem;       /* 48px · Light 300 */
  --text-h2:  2.25rem;    /* 36px · Light 300 */
  --text-h3:  1.75rem;    /* 28px · Regular 400 */
  --text-h4:  1.5rem;     /* 24px · Regular 400 */
  --text-h5:  1.25rem;    /* 20px · Regular 400 */
  --text-h6:  1.125rem;   /* 18px · Regular 400 */

  /* Body sizes — Inter */
  --text-xl:  1.25rem;    /* 20px */
  --text-lg:  1.125rem;   /* 18px */
  --text-md:  1rem;       /* 16px — default body */
  --text-sm:  0.875rem;   /* 14px */
  --text-xs:  0.75rem;    /* 12px */

  /* Line Heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   2;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY — element defaults
   ============================================================ */
:root {
  /* Used on the page */
  --h1-font:    var(--font-display);
  --h1-size:    var(--text-h1);
  --h1-weight:  var(--weight-bold);
  --h1-leading: var(--leading-tight);
  --h1-color:   var(--fg-primary);

  --h2-font:    var(--font-display);
  --h2-size:    var(--text-h2);
  --h2-weight:  var(--weight-semibold);
  --h2-leading: var(--leading-snug);
  --h2-color:   var(--fg-primary);

  --h3-font:    var(--font-display);
  --h3-size:    var(--text-h3);
  --h3-weight:  var(--weight-semibold);
  --h3-leading: var(--leading-snug);
  --h3-color:   var(--fg-primary);

  --h4-font:    var(--font-body);
  --h4-size:    var(--text-h4);
  --h4-weight:  var(--weight-medium);
  --h4-leading: var(--leading-normal);
  --h4-color:   var(--fg-primary);

  --body-font:    var(--font-body);
  --body-size:    var(--text-md);
  --body-weight:  var(--weight-regular);
  --body-leading: var(--leading-normal);
  --body-color:   var(--fg-primary);

  --caption-font:    var(--font-body);
  --caption-size:    var(--text-xs);
  --caption-weight:  var(--weight-regular);
  --caption-color:   var(--fg-secondary);

  --label-font:    var(--font-body);
  --label-size:    var(--text-xs);
  --label-weight:  var(--weight-medium);
  --label-color:   var(--fg-secondary);
  --label-tracking:var(--tracking-wider);

  --code-font:   var(--font-mono);
  --code-size:   var(--text-sm);
  --code-weight: var(--weight-regular);
  --code-color:  var(--fg-primary);
}

/* ============================================================
   TRANSITION / ANIMATION TOKENS
   ============================================================ */
:root {
  --duration-instant: 0ms;     /* @kind other */
  --duration-fast:    100ms;   /* @kind other */
  --duration-normal:  150ms;   /* @kind other */
  --duration-slow:    200ms;   /* @kind other */
  --duration-slower:  300ms;   /* @kind other */

  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);      /* @kind other */
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);      /* @kind other */
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */

  --transition-default: var(--duration-normal) var(--ease-default);
  --transition-fast:    var(--duration-fast)   var(--ease-out);
  --transition-slow:    var(--duration-slow)   var(--ease-out);
}

/* ============================================================
   EXPERIENCE PROFILE OVERRIDES
   Applied via data-profile="operational" | "guided" | "engagement"
   ============================================================ */

/* Operational: denser, smaller, efficiency-first */
[data-profile="operational"] {
  --body-size:   var(--text-sm);
  --body-leading: 1.4;
  --space-card-pad: var(--space-3);
  --table-row-height: 36px;
  --input-height: 32px;
}

/* Guided: spacious, larger, empathetic */
[data-profile="guided"] {
  --body-size:    var(--text-lg);
  --body-leading: var(--leading-relaxed);
  --space-card-pad: var(--space-6);
  --table-row-height: 56px;
  --input-height: 48px;
  --radius-button: var(--radius-full);
}

/* Engagement: warm, calm operational density — for care managers
   running enrichment programming. Sits between Operational and
   Guided: section hierarchy is lifted with display-font H2s and
   colored dots, cards are slightly more rounded (12px), shadows
   softer. Primary actions use Navy; Red is reserved for danger
   and brand moments. */
[data-profile="engagement"] {
  --radius-card:   var(--radius-xl);              /* 12px */
  --radius-button: var(--radius-lg);              /* 8px */
  --shadow-card:   0 1px 2px rgba(15, 26, 46, 0.04);
  --color-primary: var(--ndc-navy);               /* navy buttons by default */
  --color-primary-hover: var(--ndc-navy-mid);
}

/* ============================================================
   GLOBAL BASE STYLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

h1 { font-family: var(--h1-font); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-leading); color: var(--h1-color); margin: 0 0 var(--space-4); }
h2 { font-family: var(--h2-font); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-leading); color: var(--h2-color); margin: 0 0 var(--space-3); }
h3 { font-family: var(--h3-font); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-leading); color: var(--h3-color); margin: 0 0 var(--space-2); }
h4 { font-family: var(--h4-font); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-leading); color: var(--h4-color); margin: 0 0 var(--space-2); }

p { margin: 0 0 var(--space-4); line-height: var(--leading-normal); }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--code-size);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}
code { padding: 1px 6px; }
pre  { padding: var(--space-4); overflow-x: auto; }

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible — applies to all interactive elements */
:focus-visible {
  outline: 2px solid var(--ndc-red);
  outline-offset: 2px;
  box-shadow: none;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  background: var(--ndc-red);
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 6px 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 150ms;
}
.skip-link:focus { top: 0; }