/* ==========================================================================
   Shiftplus Design System — Colors & Type
   ==========================================================================
   Import once at the root of any surface:
     <link rel="stylesheet" href="/colors_and_type.css" />
   -------------------------------------------------------------------------- */

/* Fonts are self-hosted via @fontsource and imported in src/main.tsx.
   The Google Fonts @import was intentionally removed to keep the CSP tight
   (no Google CDN) and to work on locked-down hospital networks. */

:root {
  /* -----------------------------------------------------------------
     COLOR — Shiftplus palette
     Pine primary, warm apricot accent, lagoon second accent, cream paper,
     ink near-black, sage for confirmed/available, clay for warnings, rust for errors.
     ----------------------------------------------------------------- */

  /* Paper & ink — the base canvas */
  --paper:        #FAF1E6;  /* default page bg — warm cream */
  --paper-2:      #ede4d9;  /* subtle card / well / alt row */
  --paper-3:      #d9d0c5;  /* dividers, inactive surfaces */
  --ink:          #1C1A17;  /* primary text, icons */
  --ink-2:        #4A453D;  /* secondary text */
  --ink-3:        #7A7268;  /* tertiary text, placeholders */
  --ink-4:        #B8AE9F;  /* disabled text, faint borders */

  /* Pine — primary brand. Deep warm terracotta-brown; grounded and earthy. */
  --pine-50:      #fef2ee;
  --pine-100:     #fedcd0;
  --pine-200:     #f6b69e;
  --pine-300:     #da8f73;
  --pine-400:     #b86d50;
  --pine-500:     #7A3B22;  /* primary */
  --pine-600:     #6f341d;
  --pine-700:     #4e1c07;
  --pine-800:     #2a0b01;

  /* Apricot — warm accent, shift-block default */
  --apricot-50:   #fff3e6;
  --apricot-100:  #fddfbd;
  --apricot-200:  #f2bc7c;
  --apricot-300:  #d69640;
  --apricot-400:  #b0751c;
  --apricot-500:  #C58938;  /* accent — mid */
  --apricot-600:  #633f07;
  --apricot-700:  #432a04;
  --apricot-800:  #2a1a02;

  /* Sage — positive / available / confirmed */
  --sage-50:      #EEF2EC;
  --sage-100:     #D7E0D2;
  --sage-200:     #ADC2A5;
  --sage-300:     #7E9F73;
  --sage-400:     #58804B;  /* positive */
  --sage-500:     #3E6334;
  --sage-600:     #2C4825;
  --sage-700:     #1C2F18;
  --sage-800:     #0F1B0D;

  /* Clay — warning / pending / attention */
  --clay-50:      #FBEEDD;
  --clay-100:     #F5D6A8;
  --clay-200:     #E9B36A;
  --clay-300:     #C58938;  /* warning */
  --clay-400:     #96661F;
  --clay-500:     #6E4912;
  --clay-600:     #4D320A;
  --clay-700:     #321F05;
  --clay-800:     #1E1202;

  /* Rust — error / critical / unavailable */
  --rust-50:      #FAE6E0;
  --rust-100:     #F1BFAE;
  --rust-200:     #DE8773;
  --rust-300:     #B85441;  /* error */
  --rust-400:     #8A3627;
  --rust-500:     #62241A;
  --rust-600:     #421710;
  --rust-700:     #2A0E08;
  --rust-800:     #170703;

  /* Sky — kept for backwards compat; prefer Lagoon for new uses */
  --sky-50:       #E8EFF2;
  --sky-100:      #C3D4DB;
  --sky-200:      #94B0BB;
  --sky-300:      #5E849A;
  --sky-400:      #4B6E84;
  --sky-500:      #3D5F77;
  --sky-600:      #2C475A;
  --sky-700:      #1C2F3D;
  --sky-800:      #0F1B25;

  /* Lagoon — second accent. Cool teal; complements the warm pine/apricot family.
     Use for: logo bottom bar, swap-feature UI, links, AI/assistant surfaces, info states. */
  --lagoon-50:    #eaf3f6;
  --lagoon-100:   #c8e0ea;
  --lagoon-200:   #8bbece;
  --lagoon-300:   #5599b0;
  --lagoon-400:   #3d84a0;
  --lagoon-500:   #336b82;  /* primary — oklch(48% 0.1 210) */
  --lagoon-600:   #285869;
  --lagoon-700:   #1c3f4e;
  --lagoon-800:   #111f26;

  /* Shift category colors — used for colored shift blocks in the
     calendar. Chosen to sit harmoniously against --paper; desaturated
     so a week of blocks never looks like a toy. Each has a -ink
     companion used for text ON that block. */
  --shift-day:          #E8A968;   /* warm apricot  — day shifts */
  --shift-day-ink:      #4A2B12;
  --shift-evening:      #C58938;   /* warm gold     — evening */
  --shift-evening-ink:  #2a1a02;
  --shift-night:        #2a0b01;   /* deep cocoa    — night (text light) */
  --shift-night-ink:    #FAF1E6;
  --shift-oncall:       #7A3B22;   /* pine-500      — on-call */
  --shift-oncall-ink:   #FFF3E6;
  --shift-standby:      #ADC2A5;   /* muted sage    — standby */
  --shift-standby-ink:  #28341F;
  --shift-off:          #E9E0CE;   /* paper-3       — off day */
  --shift-off-ink:      #7A7268;

  /* -----------------------------------------------------------------
     SEMANTIC — use these in components, not raw palette
     ----------------------------------------------------------------- */
  --bg:            var(--paper);
  --bg-sunken:     var(--paper-2);
  --bg-raised:     #FFFFFF;
  --bg-inverse:    var(--ink);

  --fg:            var(--ink);
  --fg-muted:      var(--ink-2);
  --fg-subtle:     var(--ink-3);
  --fg-faint:      var(--ink-4);
  --fg-inverse:    var(--paper);

  --border:        #D9CFBA;
  --border-strong: #B8AE9F;
  --border-focus:  var(--lagoon-500);

  --accent:        var(--pine-500);
  --accent-hover:  var(--pine-600);
  --accent-press:  var(--pine-700);
  --accent-fg:     #FFFFFF;

  --brand:         var(--apricot-400);  /* the "Shiftplus orange" — used sparingly */

  --success:       var(--sage-400);
  --success-bg:    var(--sage-50);
  --warning:       var(--clay-300);
  --warning-bg:    var(--clay-50);
  --danger:        var(--rust-300);
  --danger-bg:     var(--rust-50);
  --info:          var(--lagoon-500);
  --info-bg:       var(--lagoon-50);

  /* -----------------------------------------------------------------
     TYPE — Shiftplus pairs Playfair Display (display) with
     Manrope (UI) and DM Mono (numeric / code / times).
     ----------------------------------------------------------------- */
  --font-serif: 'Playfair Display', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-sans:  'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — based on a 1.2/1.25 modular scale, hand-tuned */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 — our body default */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.375rem;  /* 38 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  3.75rem;   /* 60 */
  --fs-6xl:  4.75rem;   /* 76 — display */
  --fs-7xl:  6rem;      /* 96 — hero */

  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-normal: 1.48;
  --lh-relaxed:1.6;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* -----------------------------------------------------------------
     SPACING, RADII, SHADOW, MOTION
     ----------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* default for buttons, inputs */
  --radius-lg: 14px;   /* cards */
  --radius-xl: 20px;   /* wells, modals */
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows — warm, low. Never bluish. */
  --shadow-xs: 0 1px 0 rgba(28, 26, 23, 0.04), 0 1px 2px rgba(28, 26, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.05), 0 2px 6px rgba(28, 26, 23, 0.04);
  --shadow-md: 0 2px 4px rgba(28, 26, 23, 0.05), 0 6px 16px rgba(28, 26, 23, 0.06);
  --shadow-lg: 0 4px 8px rgba(28, 26, 23, 0.06), 0 16px 32px rgba(28, 26, 23, 0.08);
  --shadow-xl: 0 8px 16px rgba(28, 26, 23, 0.08), 0 32px 60px rgba(28, 26, 23, 0.12);

  /* Inner — for inset/sunken states (the paper feel) */
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                  inset 0 -1px 0 rgba(28, 26, 23, 0.04);

  /* Focus ring — lagoon with outer halo */
  --ring: 0 0 0 3px rgba(51, 107, 130, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ==========================================================================
   Base element styles intentionally REMOVED.

   The Chakra theme (src/components/ui/provider.tsx) is the single source of
   truth for base element styling (body background, headings, links,
   ::selection, type scale). Defining them here too would fight the theme via
   the cascade. Only the :root design tokens above and the .sp-* utilities
   below remain - tokens are handy for raw SVG/CSS (e.g. BrandWordmark) and the
   utilities are opt-in marketing flourishes.
   ========================================================================== */

/* Utility — the Shiftplus "eyebrow" — tiny all-caps serif italic used above
   section headers in marketing pages. A signature treatment. */
.sp-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--apricot-400);
}

/* Utility — shift block. The brand motif as a component primitive. */
.sp-shift-block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0;
  line-height: 1.1;
  background: var(--shift-day);
  color: var(--shift-day-ink);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.06);
}