@import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,800,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ═══════════════════════════════════════════════════════════════
   DentalisPMS Design System
   ═══════════════════════════════════════════════════════════════
   Brand colors: #0F0053 (Deep Indigo) · #99EFF1 (Cyan)
   Font: Satoshi (Fontshare)
   Spacing: 4px grid
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. PRIMITIVE COLOR TOKENS
   Raw color scales — never reference these directly in components.
   Use semantic tokens (section 2) instead.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand / Primary (Deep Indigo) ──────────────────────────
     Anchor: #0F0053 → mapped to 950                            */
  --brand-50: #F2F0FF;
  --brand-100: #E7E2FF;
  --brand-200: #D1C8FF;
  --brand-300: #B3A4FF;
  --brand-400: #9278FF;
  --brand-500: #7450FF;
  --brand-600: #5C30F7;
  --brand-700: #4A1DE3;
  --brand-800: #3B14BF;
  --brand-900: #1E0A80;
  --brand-950: #0F0053;

  /* ── Accent (Cyan) ──────────────────────────────────────────
     Anchor: #99EFF1 → mapped to 300                            */
  --accent-50: #EEFEFE;
  --accent-100: #D5FBFC;
  --accent-200: #B0F6F8;
  --accent-300: #99EFF1;
  --accent-400: #3EDCE0;
  --accent-500: #1EC2C7;
  --accent-600: #179CA2;
  --accent-700: #187D83;
  --accent-800: #1B646A;
  --accent-900: #1B5359;
  --accent-950: #0A3538;

  /* ── Neutral (cool-tinted, slight indigo shift) ─────────── */
  --neutral-0: #FFFFFF;
  --neutral-50: #F8F8FC;
  --neutral-100: #F0F0F6;
  --neutral-200: #E3E3ED;
  --neutral-300: #CFCFDD;
  --neutral-400: #A8A8BE;
  --neutral-500: #7E7E9A;
  --neutral-600: #5C5C78;
  --neutral-700: #454560;
  --neutral-800: #2D2D48;
  --neutral-900: #1B1B34;
  --neutral-950: #0F0F24;

  /* ── Semantic: Success (Green) ──────────────────────────── */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-300: #6EE7B7;
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065F46;
  --success-900: #064E3B;
  --success-950: #022C22;

  /* ── Semantic: Warning (Amber) ─────────────────────────── */
  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-200: #FDE68A;
  --warning-300: #FCD34D;
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;
  --warning-800: #92400E;
  --warning-900: #78350F;
  --warning-950: #451A03;

  /* ── Semantic: Error (Red) ──────────────────────────────── */
  --error-50: #FEF2F2;
  --error-100: #FEE2E2;
  --error-200: #FECACA;
  --error-300: #FCA5A5;
  --error-400: #F87171;
  --error-500: #EF4444;
  --error-600: #DC2626;
  --error-700: #B91C1C;
  --error-800: #991B1B;
  --error-900: #7F1D1D;
  --error-950: #450A0A;

  /* ── Semantic: Info (Blue) ──────────────────────────────── */
  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-200: #BFDBFE;
  --info-300: #93C5FD;
  --info-400: #60A5FA;
  --info-500: #3B82F6;
  --info-600: #2563EB;
  --info-700: #1D4ED8;
  --info-800: #1E40AF;
  --info-900: #1E3A8A;
  --info-950: #172554;
}

/* ───────────────────────────────────────────────────────────────
   2. SEMANTIC TOKENS
   Components should reference these, not the primitives above.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ────────────────────────────────────────────── */
  --bg: var(--neutral-50);
  --bg-elevated: var(--neutral-0);
  --bg-subtle: var(--neutral-100);
  --bg-inverse: var(--brand-950);

  /* ── Text ────────────────────────────────────────────────── */
  --text: var(--brand-950);
  --text-muted: var(--neutral-600);
  --text-faint: var(--neutral-500);
  --text-inverse: var(--neutral-0);
  --text-inverse-muted: rgba(255, 255, 255, 0.65);

  /* ── Borders ─────────────────────────────────────────────── */
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* ── Brand / accent ──────────────────────────────────────── */
  --accent: var(--accent-300);
  --accent-strong: var(--accent-500);
  --accent-soft: var(--accent-50);
  --cta-bg: var(--brand-950);
  --cta-text: var(--neutral-0);

  /* ── Extra highlight hues (sparing use — numbered badges only) ── */
  --highlight-amber: var(--warning-300);
  --highlight-mint: var(--success-300);

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* ── Decorative gradient (blob/ring motif) ──────────────────
     Single reusable identity for all abstract graphics —
     hero, section accents, icon badges all draw from this.    */
  --blob-gradient: linear-gradient(135deg, var(--accent-300) 0%, var(--brand-400) 100%);
}