/* ─────────────────────────────────────────────────────────────
   FosPlanner Design System — Foundations
   Single source of truth for color, type, spacing, radius, shadow.
   Drop into `:root` of your app's global stylesheet.
   ───────────────────────────────────────────────────────────── */

/* Font @imports live in fos-skin.css to avoid duplication. */

:root {
  /* ── Typography ────────────────────────────────────────── */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-icon: 'Material Icons';

  /* Type scale (1.125 minor third, rounded for crisp pixels) */
  --text-2xs:    10px;   --lh-2xs: 1.4;
  --text-xs:    10.5px;  --lh-xs:  1.4;
  --text-sm:    11.5px;  --lh-sm:  1.45;
  --text-base:  12.5px;  --lh-base:1.5;
  --text-md:    13px;    --lh-md:  1.45;
  --text-lg:    14px;    --lh-lg:  1.4;
  --text-xl:    16px;    --lh-xl:  1.35;
  --text-2xl:   18px;    --lh-2xl: 1.3;
  --text-3xl:   20px;    --lh-3xl: 1.25;
  --text-4xl:   22px;    --lh-4xl: 1.2;
  --text-5xl:   26px;    --lh-5xl: 1.15;
  --text-6xl:   30px;    --lh-6xl: 1.1;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter spacing — section labels are the only place we go uppercase */
  --tracking-tight:    -.3px;
  --tracking-normal:    0;
  --tracking-eyebrow:   .5px;   /* small uppercase eyebrows */
  --tracking-label:     .7px;   /* SectionLabel — uppercase 11px */
  --tracking-button:    .1px;

  /* ── Colors — neutrals (warm) ─────────────────────────── */
  --bg-app:      #F5F6F4;   /* whole-app warm canvas */
  --bg-surface:  #FFFFFF;   /* cards, sheets */
  --bg-muted:    #FAFAF7;   /* table column headers */
  --bg-warm:     #F5F2EC;   /* nav context pills, search, ghost button bg */
  --bg-subtle:   rgba(0,0,0,0.02);
  --bg-hover:    rgba(0,0,0,0.04);

  --fg-primary:    rgba(0,0,0,0.87);
  --fg-secondary:  #666;
  --fg-tertiary:   #888;
  --fg-muted:      #aaa;
  --fg-disabled:   rgba(0,0,0,0.38);
  --fg-on-color:   #FFFFFF;

  --border-hairline:  rgba(0,0,0,0.06);
  --border-default:   rgba(0,0,0,0.08);
  --border-strong:    rgba(0,0,0,0.12);
  --border-dashed:    rgba(0,0,0,0.10);
  --divider:          rgba(0,0,0,0.05);

  /* ── Colors — brand primary ──────────────────────────────
     The default --primary is set per active event. The three known
     event colors below seed the palette; new events should pick from
     the same hue family. */
  --primary:        #00549F;  /* FOSblauw — default; runtime-overridable */
  --primary-tint:   rgba(0,84,159,0.08);   /* primary @ 8% — bg for selected rows */
  --primary-soft:   rgba(0,84,159,0.14);   /* primary @ 14% — chip backgrounds */
  --primary-edge:   rgba(0,84,159,0.30);   /* primary @ 30% — chip borders */

  --event-blue:    #00549F;  /* FOSblauw */
  --event-purple:  #6A1B9A;
  --event-teal:    #00897B;

  /* ── Colors — semantic status ─────────────────────────── */
  --success:       #2E7D32;  --success-bg: #E8F5E9;
  --warning:       #E65100;  --warning-bg: #FFF3E0;
  --danger:        #C62828;  --danger-bg:  #FFEBEE;
  --info:          #0277BD;  --info-bg:    #E1F5FE;
  --neutral:       #5C6BC0;  --neutral-bg: #E8EAF6;

  /* ── Colors — station palette ──────────────────────────
     Each station/role gets its own color pair (fg + 14%-alpha bg).
     Used everywhere stations appear: chips, accents, gantt bars. */
  --st-bar:        #C62828;  --st-bar-bg:        #FFEBEE;
  --st-info:       #0277BD;  --st-info-bg:       #E1F5FE;
  --st-logistics:  #2E7D32;  --st-logistics-bg:  #E8F5E9;
  --st-kitchen:    #E65100;  --st-kitchen-bg:    #FFF3E0;
  --st-firstaid:   #6A1B9A;  --st-firstaid-bg:   #F3E5F5;
  --st-press:      #5C6BC0;  --st-press-bg:      #E8EAF6;

  /* ── Spacing scale ────────────────────────────────────── */
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-9:  18px;
  --space-10: 22px;
  --space-12: 28px;
  --space-14: 32px;
  --space-16: 40px;

  /* ── Radius ───────────────────────────────────────────── */
  --radius-xs:  4px;   /* badge dots, micro accents */
  --radius-sm:  6px;   /* checkbox, tiny chips */
  --radius-md:  8px;   /* buttons, secondary cards */
  --radius-lg:  9px;   /* search input, ghost buttons */
  --radius-xl: 11px;   /* tonal callouts, inline panels */
  --radius-2xl:10px;   /* PRIMARY card radius — use almost everywhere */
  --radius-3xl:14px;   /* modal/dialog shell */
  --radius-pill:9999px;

  /* ── Elevation — soft, double-layered shadows ─────────── */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:   0 4px 14px rgba(0,0,0,0.10);
  --shadow-xl:   0 8px 30px rgba(0,0,0,0.18);
  --shadow-modal:0 20px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04);

  /* Focus + selection */
  --ring-focus: 0 0 0 4px rgba(0,84,159,0.22);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(.2,.7,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast:    120ms;
  --dur-base:    160ms;
  --dur-slow:    240ms;

  /* ── Layout constants ─────────────────────────────────── */
  --nav-width:        232px;
  --topbar-height:    76px;
  --phone-width:      390px;
  --phone-height:     844px;
  --frame-width:     1440px;
  --frame-height:     900px;
}


/* ─── Semantic type roles ─────────────────────────────────
   Use these as classes or apply via @extend / Tailwind layer. */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-tertiary);
}

.t-section-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-tertiary);
}

.t-title-page   { font: var(--weight-semibold) var(--text-3xl)/var(--lh-3xl) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.t-title-hero   { font: var(--weight-semibold) var(--text-5xl)/var(--lh-5xl) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.t-title-card   { font: var(--weight-semibold) var(--text-lg)/var(--lh-lg)  var(--font-sans); letter-spacing: -.1px; color: var(--fg-primary); }
.t-title-row    { font: var(--weight-semibold) var(--text-md)/var(--lh-md)  var(--font-sans); color: var(--fg-primary); }

.t-body         { font: var(--weight-regular) var(--text-md)/var(--lh-md) var(--font-sans); color: var(--fg-primary); }
.t-body-sm      { font: var(--weight-regular) var(--text-sm)/var(--lh-sm) var(--font-sans); color: var(--fg-secondary); }
.t-meta         { font: var(--weight-regular) var(--text-xs)/var(--lh-xs) var(--font-sans); color: var(--fg-tertiary); }
.t-mono         { font: var(--weight-medium)  var(--text-md)/var(--lh-md) var(--font-mono); color: var(--fg-primary); }
.t-mono-sm      { font: var(--weight-medium)  var(--text-sm)/var(--lh-sm) var(--font-mono); color: var(--fg-secondary); }

.t-breadcrumb   { font: var(--weight-medium) var(--text-sm)/1.4 var(--font-sans); color: var(--fg-tertiary); }
.t-button       { font: var(--weight-semibold) var(--text-md)/1.4 var(--font-sans); letter-spacing: var(--tracking-button); }


/* ─── Surface primitives ──────────────────────────────────
   Re-usable building blocks. Compose, don't copy. */

.surface-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}

.surface-card-flat {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2xl);
  box-shadow: none;
}

.divider-hairline { background: var(--border-hairline); height: 1px; width: 100%; }

.focus-ring { box-shadow: var(--ring-focus); outline: none; }


/* ─── Scrollbar — thin, always-on track-less ──────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb        { background: rgba(0,0,0,0.18); border-radius: var(--radius-xs); }
::-webkit-scrollbar-track        { background: transparent; }
/* Mobile: hide scrollbars on .m-scroll surfaces */
.m-scroll::-webkit-scrollbar     { display: none; }
.m-scroll                        { -ms-overflow-style: none; scrollbar-width: none; }


/* ─── Tap feedback for any tappable element ───────────── */
.tap { transition: background var(--dur-fast), transform var(--dur-fast); }
.tap:active { transform: scale(0.98); }   /* mobile */
@media (hover: hover) {
  .tap:active { transform: scale(0.995); } /* desktop subtler */
}