/* ═══════════════════════════════════════════════════
   MyLife Platform Theme — Shared CSS Variables
   All modules inherit these; override per-module as needed.
   Layer order: base (CDN) → module (Styles.html)
   ═══════════════════════════════════════════════════ */

/* Platform fonts — loaded once at CDN level so modules don't need to */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@layer base, module;

@layer base {
:root {
  /* ─── v1.0 tokens (current contract — all modules use these) ─── */
  --ml-primary: #4f46e5;
  --ml-primary-hover: #4338ca;
  --ml-primary-light: rgba(79,70,229,.08);
  --ml-danger: #ef4444;
  --ml-warning: #f59e0b;
  --ml-success: #10b981;

  --ml-bg: #f5f6fa;
  --ml-card: #ffffff;
  --ml-border: #e8eaef;
  --ml-text1: #1e293b;
  --ml-text2: #475569;
  --ml-text3: #94a3b8;

  --ml-radius: 12px;
  --ml-shadow: 0 1px 3px rgba(0,0,0,.08);
  --ml-shadow-lg: 0 4px 12px rgba(0,0,0,.12);
  --ml-nav-height: 48px;

  --ml-fs-xs: 0.8rem;
  --ml-fs-sm: 0.875rem;
  --ml-fs-base: 0.94rem;
  --ml-fs-md: 1rem;
  --ml-fs-lg: 1.15rem;
  --ml-fs-xl: 1.3rem;
  --ml-fs-2xl: 1.6rem;

  /* ═════════════════════════════════════════════════
     v1.1 alias layer — Design System tokens resolve to v1.0 values.
     New module code may use v1.1 names; values shift to true v1.1
     during Phase 4 module-by-module visual validation.
     See: platform/docs/PLATFORM_TOKENS_V1.md
     ═════════════════════════════════════════════════ */

  /* Indigo scale (primary brand) */
  --ml-indigo-50:  #EEF2FF;
  --ml-indigo-100: #E0E7FF;
  --ml-indigo-200: #C7D2FE;
  --ml-indigo-300: #A5B4FC;
  --ml-indigo-400: #818CF8;
  --ml-indigo-500: #6366F1;
  --ml-indigo-600: var(--ml-primary);          /* #4f46e5 — alias */
  --ml-indigo-700: var(--ml-primary-hover);    /* #4338ca — alias */
  --ml-indigo-800: #2E2A6B;
  --ml-indigo-900: #1E1B4B;

  /* Teal scale (secondary accent) */
  --ml-teal-50:  #E6F4F2;
  --ml-teal-100: #C3E5E0;
  --ml-teal-200: #9BD4CC;
  --ml-teal-300: #6FC0B5;
  --ml-teal-400: #45ADA0;
  --ml-teal-500: #2A9D8F;
  --ml-teal-600: #1E8478;
  --ml-teal-700: #166A60;
  --ml-teal-800: #0E5049;
  --ml-teal-900: #083A34;

  /* Ink scale (neutrals) — aliased to v1.0 text/border tokens */
  --ml-ink-100: #F1F5F9;
  --ml-ink-200: var(--ml-border);              /* #e8eaef — alias */
  --ml-ink-300: #CBD5E1;
  --ml-ink-400: var(--ml-text3);               /* #94a3b8 — alias */
  --ml-ink-500: #64748B;
  --ml-ink-600: var(--ml-text2);               /* #475569 — alias */
  --ml-ink-700: #334155;
  --ml-ink-800: #1E293B;
  --ml-ink-900: var(--ml-text1);               /* #1e293b — alias */
  --ml-paper:   var(--ml-bg);                  /* #f5f6fa — alias */

  /* Brand gradients */
  --ml-gradient-brand: linear-gradient(180deg, #1E1B4B 0%, #2E2A6B 40%, #2563EB 100%);
  --ml-gradient-brand-horizontal: linear-gradient(90deg, #1E1B4B 0%, #2563EB 100%);
  --ml-gradient-brand-diagonal: linear-gradient(135deg, #1E1B4B 0%, #2563EB 100%);

  /* Status semantics — bg/fg pairs aliased to v1.0 values */
  --ml-status-active-bg:  rgba(16,185,129,.1);
  --ml-status-active-fg:  var(--ml-success);   /* #10b981 — alias */
  --ml-status-pending-bg: rgba(245,158,11,.1);
  --ml-status-pending-fg: var(--ml-warning);   /* #f59e0b — alias */
  --ml-status-error-bg:   rgba(239,68,68,.1);
  --ml-status-error-fg:   var(--ml-danger);    /* #ef4444 — alias */
  --ml-status-info-bg:    var(--ml-primary-light);
  --ml-status-info-fg:    var(--ml-primary);
  --ml-status-inactive-bg:#E8E8E8;
  --ml-status-inactive-fg:#5C5C5C;

  /* Sensitivity badges (PHI/PII governance) */
  --ml-sens-public-bg:  #E4F1DF; --ml-sens-public-fg:  #3E6E2A;
  --ml-sens-unknown-bg: #F0EFED; --ml-sens-unknown-fg: #5C5952;
  --ml-sens-pii-bg:     #FDE4C4; --ml-sens-pii-fg:     #8A4A00;
  --ml-sens-phi-bg:     #F9D4CF; --ml-sens-phi-fg:     #9B2414;

  /* Data-flow state badges (Data v2 change_queue lifecycle) */
  --ml-state-staged-bg:   #FFF7E6; --ml-state-staged-fg:   #7A4A00; --ml-state-staged-ring:   #E8B84C;
  --ml-state-stale-bg:    #F5F1E8; --ml-state-stale-fg:    #7A6A4E;
  --ml-state-locked-bg:   #EEF0F3; --ml-state-locked-fg:   var(--ml-ink-500);
  --ml-state-readonly-bg: #FAFBFC; --ml-state-readonly-fg: var(--ml-ink-600);
  --ml-state-degraded-bg: #FCE4F0; --ml-state-degraded-fg: #8A2C5E; --ml-state-degraded-ring: #D946A6;

  /* Tag palette */
  --ml-tag-green-bg: #DDF2E4;  --ml-tag-green-fg:  #2A7348;
  --ml-tag-blue-bg:  #DCE6FB;  --ml-tag-blue-fg:   #2852BC;
  --ml-tag-purple-bg:#E5DCFB;  --ml-tag-purple-fg: #5A3FB8;
  --ml-tag-amber-bg: #FBEBCC;  --ml-tag-amber-fg:  #8A5A00;
  --ml-tag-rose-bg:  #FBDCE2;  --ml-tag-rose-fg:   #A23048;
  --ml-tag-teal-bg:  #D0EBE7;  --ml-tag-teal-fg:   #1E8478;

  /* Typography stacks */
  --ml-font-display: 'Fraunces', Georgia, serif;
  --ml-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ml-font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Text scale — aliased to v1.0 fs tokens */
  --ml-text-xs:   var(--ml-fs-xs);
  --ml-text-sm:   var(--ml-fs-sm);
  --ml-text-base: var(--ml-fs-base);
  --ml-text-md:   var(--ml-fs-md);
  --ml-text-lg:   var(--ml-fs-lg);
  --ml-text-xl:   var(--ml-fs-xl);
  --ml-text-2xl:  var(--ml-fs-2xl);
  --ml-text-3xl:  2.25rem;
  --ml-text-4xl:  3rem;
  --ml-text-5xl:  3.75rem;

  --ml-leading-tight:   1.2;
  --ml-leading-snug:    1.4;
  --ml-leading-normal:  1.55;
  --ml-leading-relaxed: 1.7;

  /* Spacing scale */
  --ml-space-1:  4px;
  --ml-space-2:  8px;
  --ml-space-3:  12px;
  --ml-space-4:  16px;
  --ml-space-5:  20px;
  --ml-space-6:  24px;
  --ml-space-8:  32px;
  --ml-space-10: 40px;
  --ml-space-12: 48px;
  --ml-space-16: 64px;
  --ml-space-20: 80px;

  /* Radius scale */
  --ml-radius-sm:   4px;
  --ml-radius-md:   8px;
  --ml-radius-lg:   var(--ml-radius);          /* 12px — alias */
  --ml-radius-xl:   16px;
  --ml-radius-pill: 999px;

  /* Shadow scale — aliased to v1.0 shadow tokens */
  --ml-shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --ml-shadow-sm: var(--ml-shadow);
  --ml-shadow-md: var(--ml-shadow-lg);
  --ml-shadow-brand: 0 8px 24px rgba(30,27,75,0.25);

  --ml-border-subtle:  1px solid var(--ml-ink-200);
  --ml-border-default: 1px solid var(--ml-ink-300);

  /* Animation timing */
  --ml-ease:          cubic-bezier(0.4,0,0.2,1);
  --ml-ease-out:      cubic-bezier(0,0,0.2,1);
  --ml-duration-fast: 120ms;
  --ml-duration-base: 200ms;
  --ml-duration-slow: 320ms;

  /* Breakpoints (for use with @media via JS or container queries) */
  --ml-bp-sm: 640px;
  --ml-bp-md: 900px;
  --ml-bp-lg: 1200px;
  --ml-bp-xl: 1600px;

  /* Density / touch targets */
  --ml-density-compact-row:     32px;
  --ml-density-default-row:     44px;
  --ml-density-comfortable-row: 56px;
  --ml-touch-min: 44px;
  --ml-touch-rec: 48px;

  /* Z-index scale */
  --ml-z-base:     0;
  --ml-z-sticky:   10;
  --ml-z-dropdown: 50;
  --ml-z-modal:    100;
  --ml-z-toast:    200;
  --ml-z-tooltip:  300;
}
} /* end @layer base */