/* ============================================================
   WiseDoctor — Design Tokens
   "Calm clinical trust" for a premium cross-border surgery marketplace.
   Anchor: a healing teal, an azure companion, a cool porcelain neutral ramp.

   RULE: Components consume tokens only. No raw hex outside this file.
   Dark theme overrides COLOR + SHADOW tokens only (see [data-theme="dark"]).
   ============================================================ */

:root {
  /* ---- Color: neutral ramp (cool porcelain, faint blue-green undertone) ---- */
  --color-bg:         #F2F6F6;   /* app canvas */
  --color-surface:    #FFFFFF;   /* cards, panels */
  --color-surface-2:  #E8F0F0;   /* recessed / hover fills */
  --color-border:     #D6E1E1;   /* hairlines, dividers */
  --color-border-strong: #BFCFCF;
  --color-text:       #0E1E1D;   /* near-black teal-charcoal */
  --color-text-muted: #566A69;   /* secondary text, captions */

  /* ---- Color: brand ---- */
  --color-primary:        #0E7A6E;   /* healing teal — primary actions */
  --color-primary-hover:  #0B665C;
  --color-primary-tint:   #E1EFEC;   /* subtle fill behind teal content */
  --color-accent:         #2C6FC4;   /* azure companion — links, AI highlights */
  --color-accent-hover:   #245CA6;
  --color-accent-tint:    #E4EEF8;

  /* ---- Color: semantic ---- */
  --color-success:      #1C9366;
  --color-success-tint: #E0F0E9;
  --color-warning:      #B47C0C;
  --color-warning-tint: #F6ECD3;
  --color-danger:       #C1433A;
  --color-danger-tint:  #F7E2DF;
  --color-info:         #2C6FC4;
  --color-info-tint:    #E4EEF8;

  /* ---- Color: case-state palette (the 9-stage machine) ---- */
  --state-draft:            #6B7A7A;   --state-draft-tint:            #E7ECEC;
  --state-matched:          #2C6FC4;   --state-matched-tint:          #E4EEF8;
  --state-sent:             #4C63C9;   --state-sent-tint:             #E7E9FA;
  --state-responses_in:     #6D57C7;   --state-responses_in-tint:     #ECE7F8;
  --state-doctor_selected:  #8A50BC;   --state-doctor_selected-tint:  #F1E6F6;
  --state-estimate_ready:   #B47C0C;   --state-estimate_ready-tint:   #F6ECD3;
  --state-booked:           #0E7A6E;   --state-booked-tint:           #E1EFEC;
  --state-surgery_complete: #1C9366;   --state-surgery_complete-tint: #E0F0E9;
  --state-commission_paid:  #0F5E45;   --state-commission_paid-tint:  #DCEDE4;

  /* ---- Per-portal accent (set on body[data-portal]) ---- */
  --portal-accent: var(--color-primary);
  --portal-accent-tint: var(--color-primary-tint);

  /* ---- Radius (soft 14px signature) ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Shadows (soft, low, cool-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(14, 30, 29, 0.06);
  --shadow-sm: 0 1px 3px rgba(14, 30, 29, 0.08), 0 1px 2px rgba(14, 30, 29, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 30, 29, 0.08), 0 2px 4px rgba(14, 30, 29, 0.04);
  --shadow-lg: 0 12px 32px rgba(14, 30, 29, 0.12), 0 4px 8px rgba(14, 30, 29, 0.06);
  --shadow-focus: 0 0 0 3px rgba(44, 111, 196, 0.35);

  /* ---- Typography (system stack only; tabular numerals for prices) ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               Menlo, Consolas, monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 — body default */
  --text-md:   1.0625rem;  /* 17 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  2rem;       /* 32 */
  --text-3xl:  2.5rem;     /* 40 */
  --text-4xl:  3.25rem;    /* 52 — hero display */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal:1.55;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  /* ---- Layout ---- */
  --header-h: 64px;
  --nav-w: 248px;
  --content-max: 1160px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.32, 0.72, 0.32, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 340ms;
}

/* ---- Per-portal accents: rotate hue, hold saturation/lightness ---- */
body[data-portal="patient"]  { --portal-accent: #0E7A6E; --portal-accent-tint: #E1EFEC; }
body[data-portal="doctor"]   { --portal-accent: #2C63C4; --portal-accent-tint: #E4EAF8; }
body[data-portal="hospital"] { --portal-accent: #7A54C9; --portal-accent-tint: #EEE7F8; }
body[data-portal="admin"]    { --portal-accent: #4E6076; --portal-accent-tint: #E7ECF1; }
body[data-portal="public"]   { --portal-accent: #0E7A6E; --portal-accent-tint: #E1EFEC; }

/* ============================================================
   Dark theme — override color + shadow tokens ONLY.
   Deep teal-slate canvas; brighter brand hues to hold contrast.
   ============================================================ */
[data-theme="dark"] {
  --color-bg:         #0C1615;
  --color-surface:    #132322;
  --color-surface-2:  #1B302E;
  --color-border:     #274240;
  --color-border-strong: #37605C;
  --color-text:       #E9F1F0;
  --color-text-muted: #97ADAB;

  --color-primary:        #2AB3A2;
  --color-primary-hover:  #37C4B2;
  --color-primary-tint:   #12312D;
  --color-accent:         #6BA6ED;
  --color-accent-hover:   #86B8F2;
  --color-accent-tint:    #16283D;

  --color-success:      #34B784;   --color-success-tint: #123227;
  --color-warning:      #DDA43A;   --color-warning-tint: #33290F;
  --color-danger:       #E4675C;   --color-danger-tint:  #37201D;
  --color-info:         #6BA6ED;   --color-info-tint:    #16283D;

  --state-draft:            #8A9A99;   --state-draft-tint:            #212F2E;
  --state-matched:          #6BA6ED;   --state-matched-tint:          #16283D;
  --state-sent:             #8494EE;   --state-sent-tint:             #1E2340;
  --state-responses_in:     #A08FEA;   --state-responses_in-tint:     #241E3D;
  --state-doctor_selected:  #BE8CE0;   --state-doctor_selected-tint:  #2C1E38;
  --state-estimate_ready:   #DDA43A;   --state-estimate_ready-tint:   #33290F;
  --state-booked:           #2AB3A2;   --state-booked-tint:           #12312D;
  --state-surgery_complete: #34B784;   --state-surgery_complete-tint: #123227;
  --state-commission_paid:  #4FCBA0;   --state-commission_paid-tint:  #103028;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(107, 166, 237, 0.45);
}

/* Dark per-portal accents (brighter to hold contrast on deep canvas) */
[data-theme="dark"] body[data-portal="patient"]  { --portal-accent: #2AB3A2; --portal-accent-tint: #12312D; }
[data-theme="dark"] body[data-portal="doctor"]   { --portal-accent: #7CA0F0; --portal-accent-tint: #1B2340; }
[data-theme="dark"] body[data-portal="hospital"] { --portal-accent: #B48BEA; --portal-accent-tint: #281E3B; }
[data-theme="dark"] body[data-portal="admin"]    { --portal-accent: #93A7BD; --portal-accent-tint: #1E2A35; }
[data-theme="dark"] body[data-portal="public"]   { --portal-accent: #2AB3A2; --portal-accent-tint: #12312D; }