/* ==========================================================================
   ClinicOS — Design Tokens (Calm Clinical)
   Kiansh ClinicOS · Light mode only (v1 deliberately forces light)
   Font pairing: Inter (UI/Latin) + Noto Sans Devanagari (Hindi companion)
   Values mirror the Figma variables 1:1 for the Filament re-skin.
   ========================================================================== */

:root {
  /* ---------- PRIMITIVES · Navy ---------- */
  --navy-50:  #EAEEF3;
  --navy-100: #D5DCE6;
  --navy-200: #AAB9CC;
  --navy-300: #7E93AF;
  --navy-400: #3F5C7F;
  --navy-500: #0A2540; /* brand / primary */
  --navy-600: #0D1B2A; /* deep rail */
  --navy-700: #091422;
  --navy-900: #050B12;

  /* ---------- PRIMITIVES · Green ---------- */
  --green-50:  #E7F6EE;
  --green-100: #C6EAD6;
  --green-200: #93D8B2;
  --green-500: #2BAA66; /* accent / success */
  --green-600: #1F8A52;
  --green-700: #166E41;

  /* ---------- PRIMITIVES · Amber ---------- */
  --amber-50:  #FDF4E3;
  --amber-100: #FAE6BE;
  --amber-500: #E39A18; /* warning */
  --amber-600: #B5760B;
  --amber-700: #8A5A08;

  /* ---------- PRIMITIVES · Red ---------- */
  --red-50:  #FCECEC;
  --red-100: #F6D2D2;
  --red-500: #DC2626;
  --red-600: #B91C1C; /* danger / draft */
  --red-700: #991B1B;

  /* ---------- PRIMITIVES · Sand ---------- */
  --sand-50:  #FBF9F4;
  --sand-100: #F7F3EC; /* page canvas */
  --sand-200: #EFE8DB;
  --sand-300: #E4DBC9;

  /* ---------- PRIMITIVES · Neutral ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-100: #F1EEE7;
  --neutral-200: #E7E3DA;
  --neutral-300: #D9D5CC;
  --neutral-400: #B0ABA0;
  --neutral-500: #8A857B;
  --neutral-600: #666666; /* muted text */
  --neutral-700: #3A3A3A;
  --neutral-900: #1A1A1A; /* near-black text */

  /* ======================================================================
     SEMANTIC · Background
     ====================================================================== */
  --color-bg-canvas:          var(--sand-100);
  --color-bg-surface:         var(--neutral-0);
  --color-bg-surface-alt:     var(--sand-50);
  --color-bg-sunken:          var(--neutral-100);
  --color-bg-hover:           var(--sand-200);
  --color-bg-rail:            var(--navy-600);
  --color-bg-brand:           var(--navy-500);
  --color-bg-brand-hover:     var(--navy-700);
  --color-bg-success:         var(--green-500);
  --color-bg-success-hover:   var(--green-600);
  --color-bg-success-subtle:  var(--green-50);
  --color-bg-warning-subtle:  var(--amber-50);
  --color-bg-danger:          var(--red-600);
  --color-bg-danger-hover:    var(--red-700);
  --color-bg-danger-subtle:   var(--red-50);

  /* ======================================================================
     SEMANTIC · Text
     ====================================================================== */
  --color-text-primary:    var(--neutral-900);
  --color-text-secondary:  var(--neutral-600);
  --color-text-tertiary:   var(--neutral-500);
  --color-text-on-brand:   var(--neutral-0);
  --color-text-on-accent:  var(--neutral-0);
  --color-text-brand:      var(--navy-500);
  --color-text-success:    var(--green-700);
  --color-text-danger:     var(--red-600);
  --color-text-warning:    var(--amber-700);
  --color-text-disabled:   var(--neutral-400);

  /* ======================================================================
     SEMANTIC · Border
     ====================================================================== */
  --color-border-subtle:   var(--neutral-200);
  --color-border-default:  var(--neutral-300);
  --color-border-strong:   var(--neutral-400);
  --color-border-focus:    var(--navy-400);
  --color-border-brand:    var(--navy-500);
  --color-border-success:  var(--green-500);

  /* ======================================================================
     SEMANTIC · Accent
     ====================================================================== */
  --color-accent-success:         var(--green-500);
  --color-accent-success-strong:  var(--green-600);

  /* ======================================================================
     SEMANTIC · Status pills (bg + fg pairs)
     ====================================================================== */
  --color-status-signed-bg:     var(--green-50);
  --color-status-signed-fg:     var(--green-700);
  --color-status-draft-bg:      var(--red-50);
  --color-status-draft-fg:      var(--red-600);   /* also: red dashed border */
  --color-status-paid-bg:       var(--green-50);
  --color-status-paid-fg:       var(--green-700);
  --color-status-partial-bg:    var(--amber-50);
  --color-status-partial-fg:    var(--amber-700);
  --color-status-cancelled-bg:  var(--neutral-100);
  --color-status-cancelled-fg:  var(--neutral-600);
  --color-status-info-bg:       var(--navy-50);
  --color-status-info-fg:       var(--navy-500);
  --color-status-neutral-bg:    var(--neutral-100);
  --color-status-neutral-fg:    var(--neutral-600);

  /* ======================================================================
     SPACING · 4px base
     ====================================================================== */
  --spacing-0:   0px;
  --spacing-2:   2px;
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 64px;

  /* ======================================================================
     RADIUS
     ====================================================================== */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 999px;

  /* ======================================================================
     ELEVATION · soft, navy-tinted (rgb 10 37 64)
     ====================================================================== */
  --shadow-xs: 0 1px 2px rgba(10,37,64,0.04);
  --shadow-sm: 0 1px 2px rgba(10,37,64,0.05), 0 2px 4px rgba(10,37,64,0.04);
  --shadow-md: 0 4px 12px -2px rgba(10,37,64,0.08), 0 2px 6px rgba(10,37,64,0.04);
  --shadow-lg: 0 12px 28px -6px rgba(10,37,64,0.12), 0 4px 10px rgba(10,37,64,0.05);
  --shadow-focus: 0 0 0 3px rgba(63,92,127,0.35);

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */
  --font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --font-hindi:'Noto Sans Devanagari', 'Inter', system-ui, sans-serif;
  /* Mixed English+Hindi in one run: apply --font-ui and let the browser
     fall through to Noto Sans Devanagari via the stack below. */
  --font-mixed:'Inter', 'Noto Sans Devanagari', system-ui, sans-serif;

  /* size / line-height / weight / tracking */
  --type-display-lg:  600 28px/34px var(--font-mixed);   /* tracking -1%   */
  --type-heading-xl:  600 22px/28px var(--font-mixed);   /* tracking -0.5% */
  --type-heading-lg:  600 18px/24px var(--font-mixed);   /* tracking -0.3% */
  --type-heading-md:  600 16px/22px var(--font-mixed);
  --type-body-lg:     400 15px/22px var(--font-mixed);
  --type-body-md:     400 14px/20px var(--font-mixed);   /* base */
  --type-body-md-str: 500 14px/20px var(--font-mixed);
  --type-body-sm:     400 13px/18px var(--font-mixed);   /* dense tables */
  --type-body-sm-str: 500 13px/18px var(--font-mixed);
  --type-caption:     400 12px/16px var(--font-mixed);
  --type-overline:    600 11px/14px var(--font-mixed);   /* tracking +6%, uppercase */

  /* ======================================================================
     COMPONENT HOOKS · common sizes
     ====================================================================== */
  --control-height:        40px; /* desktop buttons/inputs */
  --control-height-touch:  44px; /* mobile min touch target */
  --tap-target-min:        44px;
}

/* Handy utility classes ----------------------------------------------------- */
.co-canvas   { background: var(--color-bg-canvas); color: var(--color-text-primary); }
.co-card     { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle);
               border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.co-overline { font: var(--type-overline); letter-spacing: .06em; text-transform: uppercase;
               color: var(--color-text-secondary); }