/* ============================================================================
   MaintMode — Colors & Type
   Dark-first, data-dense. Color carries semantics (status / impact / conflict /
   destructive). Everything else is monochrome. Light mode is supported but
   secondary.

   Hue allocation (to keep semantics distinguishable at a glance):
     • status-planned       → blue
     • status-in_progress   → orange
     • status-completed     → green
     • status-draft         → neutral zinc        ← muted
     • status-canceled      → neutral zinc + strike/stripe utility ← muted
     • impact-partial       → amber  (warmer/yellower than in_progress orange)
     • impact-full          → red
     • conflict             → fuchsia/magenta (clearly off the red axis)
     • destructive          → red — separate from impact-full, used on Cancel/Delete buttons only
     • accent               → indigo (focus, selection)
   ========================================================================== */

/* Inter Variable — brand sans. Local files; no network fetch. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2-variations"),
       url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2") format("woff2-variations"),
       url("fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  /* ---------- Type — Inter Variable (brand) with system fallback ---------- */
  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial,
    "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale — denser than default. 13px is the body floor in product UI. */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-md:  13px;
  --text-lg:  14px;
  --text-xl:  16px;
  --text-2xl: 20px;
  --text-3xl: 28px;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;

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

  /* ---------- Radius ---------- */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ---------- Elevation (single direction, low contrast) ---------- */
  --shadow-xs: 0 1px 0 0 rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);

  /* ============================================================================
     DARK THEME (default)
     ========================================================================== */
  color-scheme: dark;

  /* Backgrounds */
  --bg:               #0A0A0B;
  --bg-elev-1:        #0E0E10;
  --bg-elev-2:        #131316;
  --bg-elev-3:        #18181C;
  --bg-elev-4:        #1F1F23;
  --bg-overlay:       rgba(0,0,0,0.65);

  /* Interaction surfaces — apply to clickable rows, list items, table rows. */
  --bg-row-hover:     #16161A;
  --bg-row-selected:  rgba(110,123,255,0.10);
  --bg-row-selected-strong: rgba(110,123,255,0.18);

  /* Borders */
  --border-subtle:    #1A1A1F;
  --border:           #25252B;
  --border-strong:    #34343C;

  /* Foreground — 4-step zinc ramp. */
  --fg:               #F5F5F7;
  --fg-strong:        #FFFFFF;
  --fg-muted:         #A1A1AA;
  --fg-dim:           #71717A;
  --fg-disabled:      #52525B;

  /* Accent — indigo. */
  --accent:           #6E7BFF;
  --accent-hover:     #8189FF;
  --accent-pressed:   #5762E6;
  --accent-soft:      rgba(110,123,255,0.14);
  --accent-soft-2:    rgba(110,123,255,0.06);
  --accent-fg:        #C7CCFF;

  /* Focus ring */
  --focus-ring:       0 0 0 2px var(--bg-elev-1), 0 0 0 4px var(--accent);

  /* ---------- Status — five maintenance states ---------- */
  --status-draft-fg:        #A1A1AA;
  --status-draft-bg:        rgba(161,161,170,0.10);
  --status-draft-border:    rgba(161,161,170,0.30);

  --status-planned-fg:      #5EB9F6;
  --status-planned-bg:      rgba(94,185,246,0.12);
  --status-planned-border:  rgba(94,185,246,0.30);

  --status-in_progress-fg:  #F5A524;  /* orange — kept */
  --status-in_progress-bg:  rgba(245,165,36,0.13);
  --status-in_progress-border: rgba(245,165,36,0.35);

  --status-completed-fg:    #4ADE80;
  --status-completed-bg:    rgba(74,222,128,0.10);
  --status-completed-border: rgba(74,222,128,0.28);

  /* Canceled — same neutral as draft, but DIFFERENTIATED VISUALLY:
     consumers must apply `.is-canceled` utility (strikethrough + diagonal stripes)
     defined at the bottom of this file. */
  --status-canceled-fg:     #71717A;
  --status-canceled-bg:     rgba(113,113,122,0.06);
  --status-canceled-border: rgba(113,113,122,0.22);
  --status-canceled-stripe: rgba(113,113,122,0.22);

  /* ---------- Impact — three levels, separate hues from status ----------
     partial moved to AMBER so it no longer collides with in_progress orange. */
  --impact-none-fg:         #71717A;
  --impact-none-bg:         rgba(113,113,122,0.08);
  --impact-partial-fg:      #FACC15;  /* amber/yellow */
  --impact-partial-bg:      rgba(250,204,21,0.13);
  --impact-partial-border:  rgba(250,204,21,0.35);
  --impact-full-fg:         #F87171;  /* red */
  --impact-full-bg:         rgba(248,113,113,0.14);
  --impact-full-border:     rgba(248,113,113,0.35);

  /* ---------- Conflict — fuchsia/magenta, off the red axis ---------- */
  --conflict-fg:            #E879F9;
  --conflict-bg:            rgba(232,121,249,0.12);
  --conflict-border:        rgba(232,121,249,0.40);
  --conflict-stripe:        rgba(232,121,249,0.22);

  /* ---------- Destructive — for Cancel / Delete buttons. Distinct from impact-full. ---------- */
  --destructive-fg:         #F87171;
  --destructive-bg:         rgba(248,113,113,0.10);
  --destructive-hover:      rgba(248,113,113,0.18);
  --destructive-border:     rgba(248,113,113,0.40);
  --destructive-solid:      #DC2626;
  --destructive-solid-hover:#B91C1C;

  /* Selection / range / today highlight on calendar grid */
  --range-bg:               rgba(110,123,255,0.08);
  --today-line:             #6E7BFF;
  --grid-line:              #1A1A1F;
  --grid-line-strong:       #25252B;
  --grid-weekend-bg:        #0C0C0E;
}

/* ============================================================================
   LIGHT THEME — apply with data-theme="light".
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg:               #FFFFFF;
  --bg-elev-1:        #FFFFFF;
  --bg-elev-2:        #FAFAFA;
  --bg-elev-3:        #F4F4F5;
  --bg-elev-4:        #E4E4E7;
  --bg-overlay:       rgba(15,15,18,0.45);

  --bg-row-hover:     #F4F4F5;
  --bg-row-selected:  rgba(87,96,229,0.10);
  --bg-row-selected-strong: rgba(87,96,229,0.18);

  --border-subtle:    #F0F0F2;
  --border:           #E4E4E7;
  --border-strong:    #D4D4D8;

  --fg:               #18181B;
  --fg-strong:        #09090B;
  --fg-muted:         #52525B;
  --fg-dim:           #71717A;
  --fg-disabled:      #A1A1AA;

  --accent:           #5760E5;
  --accent-hover:     #4047C8;
  --accent-pressed:   #353CA8;
  --accent-soft:      rgba(87,96,229,0.10);
  --accent-soft-2:    rgba(87,96,229,0.04);
  --accent-fg:        #3E47C2;

  --status-draft-fg:        #52525B;
  --status-draft-bg:        #F4F4F5;
  --status-draft-border:    #D4D4D8;

  --status-planned-fg:      #1E6FB5;
  --status-planned-bg:      #E7F2FB;
  --status-planned-border:  #BBDDF4;

  --status-in_progress-fg:  #92590A;
  --status-in_progress-bg:  #FEF3C7;
  --status-in_progress-border: #FCD986;

  --status-completed-fg:    #166534;
  --status-completed-bg:    #DCF6E4;
  --status-completed-border: #BCE5C9;

  --status-canceled-fg:     #71717A;
  --status-canceled-bg:     #F4F4F5;
  --status-canceled-border: #D4D4D8;
  --status-canceled-stripe: rgba(113,113,122,0.30);

  /* impact-partial → amber, clearly distinct from in_progress orange */
  --impact-none-fg:         #71717A;
  --impact-none-bg:         #F4F4F5;
  --impact-partial-fg:      #854D0E;
  --impact-partial-bg:      #FEF9C3;
  --impact-partial-border:  #FDE68A;
  --impact-full-fg:         #B42318;
  --impact-full-bg:         #FEE4E2;
  --impact-full-border:     #F5A6A0;

  /* conflict → fuchsia */
  --conflict-fg:            #A21CAF;
  --conflict-bg:            #FAE8FF;
  --conflict-border:        #F0ABFC;
  --conflict-stripe:        rgba(162,28,175,0.20);

  /* destructive — separate from impact-full */
  --destructive-fg:         #B42318;
  --destructive-bg:         #FEE4E2;
  --destructive-hover:      #FECDCA;
  --destructive-border:     #F5A6A0;
  --destructive-solid:      #DC2626;
  --destructive-solid-hover:#B91C1C;

  --range-bg:               rgba(87,96,229,0.06);
  --today-line:             #5760E5;
  --grid-line:              #F0F0F2;
  --grid-line-strong:       #E4E4E7;
  --grid-weekend-bg:        #FAFAFA;
}

/* ============================================================================
   Base reset + semantic type
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic type — match these names in components. */
.h1 {
  font: 600 var(--text-2xl)/var(--leading-tight) var(--font-sans);
  letter-spacing: -0.014em;
  color: var(--fg-strong);
}
.h2 {
  font: 600 var(--text-xl)/var(--leading-tight) var(--font-sans);
  letter-spacing: -0.010em;
  color: var(--fg-strong);
}
.h3 {
  font: 600 var(--text-lg)/var(--leading-snug) var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--fg);
}
.body    { font: 400 var(--text-md)/var(--leading-normal) var(--font-sans); color: var(--fg); }
.body-sm { font: 400 var(--text-sm)/var(--leading-normal) var(--font-sans); color: var(--fg-muted); }
.label {
  font: 600 var(--text-xs)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.caption { font: 400 var(--text-xs)/1.3 var(--font-sans); color: var(--fg-dim); }
.mono    { font-family: var(--font-mono); font-feature-settings: "tnum","zero"; }
.num     { font-variant-numeric: tabular-nums; }

/* Focus — always visible. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Selection — accent soft. */
::selection { background: var(--accent-soft); color: var(--fg-strong); }

/* ============================================================================
   Pattern utilities
   ========================================================================== */

/* Conflict stripe — for calendar bars + conflict cards. Fuchsia. */
.conflict-stripes {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    var(--conflict-stripe) 6px 7px
  );
}

/* Canceled state — strikethrough + diagonal stripes overlay, so it does NOT
   read like draft. Apply to status badge, calendar bar, list row, anywhere
   you'd otherwise rely on the canceled token alone. */
.is-canceled {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--status-canceled-fg);
  color: var(--status-canceled-fg);
  position: relative;
}
.is-canceled-bar,
.is-canceled.is-canceled-bar {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    var(--status-canceled-stripe) 5px 6px
  );
}