/* Hallmark · design tokens for the public job portal (home.html, job.html)
 * Brand: ASP Medical Group blue (from the logo), Manrope display + DM Sans body. Values are OKLCH
 * equivalents of the hex palette in style.css :root, so both stay visually in step.
 */
/* Metric-matched fallbacks: while Manrope / DM Sans load, Arial is scaled to the same width and
   line metrics (measured against the real fonts), so text wraps the same and the page does not
   jump when the web fonts arrive. */
@font-face { font-family:'Manrope Fallback'; src:local('Arial'), local('ArialMT'); font-weight:300 499; size-adjust:104.2%; ascent-override:102.7%; descent-override:28.8%; line-gap-override:0%; }
@font-face { font-family:'Manrope Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight:500 700; size-adjust:98.1%; ascent-override:109.1%; descent-override:30.6%; line-gap-override:0%; }
@font-face { font-family:'Manrope Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight:701 900; size-adjust:101.1%; ascent-override:105.8%; descent-override:29.7%; line-gap-override:0%; }
@font-face { font-family:'Instrument Serif Fallback'; src:local('Georgia Italic'), local('Georgia-Italic'), local('Georgia'); font-style:italic; size-adjust:80.7%; ascent-override:122.7%; descent-override:38.4%; line-gap-override:0%; }
@font-face { font-family:'DM Sans Fallback'; src:local('Arial'), local('ArialMT'); font-weight:300 500; size-adjust:103.6%; ascent-override:95.6%; descent-override:29.9%; line-gap-override:0%; }
@font-face { font-family:'DM Sans Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight:501 900; size-adjust:100.1%; ascent-override:98.9%; descent-override:31%; line-gap-override:0%; }

:root {
  /* Surfaces */
  --color-paper:        oklch(97.7% 0.006 245);   /* #f4f8fb page */
  --color-paper-2:      oklch(100% 0 0);          /* cards */
  --color-paper-3:      oklch(95.2% 0.021 250);   /* #e8f3fa blue wash */
  --color-paper-sunk:   oklch(97.2% 0.007 250);   /* inset panels */
  --color-rule:         oklch(92.8% 0.010 250);   /* #e3eaf1 hairlines */
  --color-rule-strong:  oklch(86.5% 0.034 250);    /* hover borders */

  /* Text */
  --color-ink:          oklch(26% 0.05 253);      /* #0b2540 navy */
  --color-ink-2:        oklch(45% 0.029 250);     /* secondary copy */
  --color-muted:        oklch(54% 0.035 250);     /* #5f7186 */
  --color-faint:        oklch(70% 0.016 250);     /* disabled, meta */

  /* Brand */
  --color-accent:       oklch(53.5% 0.128 243);   /* #0077b6 ASP blue */
  --color-accent-deep:  oklch(44% 0.104 243);     /* #005f92 */
  --color-accent-ink:   oklch(100% 0 0);
  --color-accent-soft:  oklch(80% 0.098 243);      /* blue on dark */
  --color-focus:        oklch(53.5% 0.128 243);
  --color-accent-glow:  oklch(53.5% 0.128 243 / 0.32);   /* pulse ring on the active onboarding step */

  /* Deep band (footer) */
  --color-deep:         oklch(33% 0.067 243);     /* deep navy */
  --color-deep-rule:    oklch(43% 0.063 243);
  --color-deep-ink:     oklch(85% 0.029 250);
  --color-deep-muted:   oklch(72% 0.034 250);

  /* Status */
  --color-open:         oklch(52% 0.1 155);
  --color-open-bg:      oklch(95% 0.03 158);
  --color-filled:       oklch(57% 0.11 75);
  --color-filled-bg:    oklch(96.5% 0.035 85);
  --color-closed:       oklch(55% 0.017 250);
  --color-closed-bg:    oklch(95.5% 0.003 200);
  --color-doctor:       oklch(50% 0.11 255);
  --color-doctor-bg:    oklch(95.5% 0.02 255);
  --color-nurse:        oklch(50% 0.13 345);
  --color-nurse-bg:     oklch(96% 0.022 345);
  --color-pay:          oklch(42% 0.11 255);
  --color-pay-rule:     oklch(80% 0.07 250);

  /* Type */
  --font-script: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;   /* italic accent word in the hero headline */
  --font-display: 'Manrope', 'Manrope Fallback', system-ui, sans-serif;
  --font-body:    'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;

  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs:  0.75rem;     /* 12px */
  --text-sm:  0.8125rem;   /* 13px */
  --text-md:  0.9375rem;   /* 15px */
  --text-lg:  1.0625rem;   /* 17px */
  --text-xl:  1.375rem;    /* 22px */
  --text-2xl: 1.75rem;     /* 28px */
  --text-display-s: clamp(2.125rem, 4.2vw + 0.5rem, 3.5rem);

  /* Space (4-pt) */
  --space-3xs: 0.25rem;  --space-2xs: 0.5rem;  --space-xs: 0.75rem;
  --space-sm:  1rem;     --space-md:  1.5rem;  --space-lg: 2rem;
  --space-xl:  3rem;     --space-2xl: 4.5rem;  --space-3xl: 6rem;

  /* Shape */
  --radius-input: 8px;
  --radius-card:  12px;
  --radius-pill:  999px;
  --rule: 1px solid var(--color-rule);
  --shadow-float: 0 10px 30px oklch(27% 0.028 250 / 0.08);
  --shadow-lift:  0 8px 24px oklch(27% 0.028 250 / 0.07);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 180ms;
  --dur-med:   320ms;
}