/* ==========================================================================
   ausbeds · light design system · tokens
   --------------------------------------------------------------------------
   A restrained, Notion-density variant of the ausbeds brand for internal
   staff tools. Light mode only, marker-cyan primary, pastels demoted to
   status tints only. Load before components.css.
   ========================================================================== */

/* ---------- fonts ----------
   Poppins, self-hosted. Full weight range 100–900 + italics so staff tools
   can reach for light or italic variants without hitting external CDNs. */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-100.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-100.woff') format('woff');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-100italic.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-100italic.woff') format('woff');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-200.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-200.woff') format('woff');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-200italic.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-200italic.woff') format('woff');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-300.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-300.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-300italic.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-300italic.woff') format('woff');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-regular.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-italic.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-500.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-500.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-500italic.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-500italic.woff') format('woff');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-600.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-600.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-600italic.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-600italic.woff') format('woff');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-700.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-700.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-700italic.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-700italic.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-800.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-800.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-800italic.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-800italic.woff') format('woff');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-900.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-900.woff') format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-v24-latin-900italic.woff2') format('woff2'),
       url('fonts/poppins-v24-latin-900italic.woff') format('woff');
  font-weight: 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Permanent Marker';
  src: url('fonts/PermanentMarker-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* ========== CORE SURFACES ==========
     Warm off-white page, pure-white panels. The warmth is what keeps it
     ausbeds and not a generic admin tool. */
  --ink:            #0E0E10;
  --ink-soft:       #1A1A1D;
  --paper:          #FFFFFF;
  --paper-warm:     #FAFAF7;   /* page background — almost invisible warmth */
  --paper-warmer:   #F5F4EE;   /* sunken / striped rows */

  /* ========== NEUTRALS ========== */
  --gray-950: #0E0E10;
  --gray-900: #1A1A1D;
  --gray-800: #2A2A2E;
  --gray-700: #3F3F46;
  --gray-600: #52525B;
  --gray-500: #71717A;
  --gray-400: #A1A1AA;
  --gray-300: #D4D4D8;
  --gray-200: #E7E6E1;   /* warm-tinted line */
  --gray-150: #EEEDE7;
  --gray-100: #F4F3ED;
  --gray-50:  #FAFAF7;

  /* ========== TEXT ========== */
  --fg-1:   var(--ink);        /* primary */
  --fg-2:   var(--gray-700);   /* body */
  --fg-3:   var(--gray-500);   /* meta / captions */
  --fg-4:   var(--gray-400);   /* placeholder / disabled */
  --fg-inv: #FFFFFF;           /* on dark fills */

  /* ========== SURFACES ========== */
  --bg-page:    var(--paper-warm);
  --bg-panel:   var(--paper);         /* cards, columns, modals */
  --bg-raised:  var(--paper);         /* menus, popovers */
  --bg-sunken:  var(--paper-warmer);  /* subtle fill (zebra rows, read rows) */
  --bg-hover:   rgba(14,14,16,0.04);
  --bg-active:  rgba(14,14,16,0.07);

  /* ========== LINES ========== */
  --line-1: var(--gray-200);   /* default border */
  --line-2: var(--gray-300);   /* input / emphasis */
  --line-3: var(--gray-150);   /* hairline divider inside cards */

  /* ========== PRIMARY ACCENT — marker-cyan ==========
     Cyan carries interactive state: links, focus ring, selected rows,
     primary buttons. Saturated enough to stand out on warm-white. */
  --accent:          #27A7DD;   /* slightly deepened marker-cyan for AA contrast on white */
  --accent-hover:    #1E8BBB;
  --accent-active:   #176E95;
  --accent-soft:     #E6F4FB;   /* soft tint bg (selected rows, hovers) */
  --accent-softer:   #F2F9FD;
  --accent-fg:       #FFFFFF;
  --accent-ring:     rgba(39,167,221,0.35);

  /* The bright marker-cyan is kept for accent moments (eyebrow, emphasis) */
  --marker-cyan:     #4FC3F7;
  --marker-yellow:   #FFC107;
  --marker-purple:   #9575CD;
  --marker-green:    #4CAF50;
  --marker-red:      #E57373;

  /* ========== SEMANTIC STATUS ==========
     Pastel tints from the brand, paired with readable dark-text. These
     are the ONLY place pastels appear in this light system. */
  --success:       #1E7A37;
  --success-bg:    #E6F6E9;    /* tint of --pastel-mint */
  --success-line:  #BEE6C6;

  --warning:       #8A5A00;
  --warning-bg:    #FFF6D6;    /* tint of --pastel-yellow */
  --warning-line:  #F2DC9A;

  --danger:        #B3261E;
  --danger-bg:     #FDECEA;    /* tint of --pastel-coral */
  --danger-line:   #F4C2BD;

  --info:          #0B74B8;
  --info-bg:       #E6F4FB;    /* tint of --pastel-sky */
  --info-line:     #BFE1F1;

  --neutral-bg:    var(--gray-100);
  --neutral-line:  var(--gray-200);

  /* The raw brand pastels — available for occasional moments (empty-state
     illustrations, eyebrow accents). Do NOT use as page section bands. */
  --pastel-sky:    #A8D8EA;
  --pastel-mint:   #B2F2BB;
  --pastel-lilac:  #D8BFD8;
  --pastel-yellow: #FFF59D;
  --pastel-pink:   #FFB6C1;
  --pastel-coral:  #F5A896;

  /* ========== LINK ========== */
  --link:       var(--accent);
  --link-hover: var(--accent-hover);

  /* ========== SELECTION ========== */
  --selection-bg: rgba(79,195,247,0.28);

  /* ========== TYPOGRAPHY ==========
     Dense-app scale. Marketing's 16px body drops to 14px here; dense
     tables run at 13px. Poppins covers 400 / 600 / 800 only in this
     system — no 900 Black (reserved for marketing hero). */
  --font-sans:  'Poppins', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-marker:'Permanent Marker', 'Poppins', cursive;
  --font-mono:  ui-monospace, 'SF Mono', 'Menlo', 'Roboto Mono', monospace;

  --fs-2xs: 11px;   /* table meta, caps eyebrow */
  --fs-xs:  12px;   /* secondary meta */
  --fs-sm:  13px;   /* dense ui / tables */
  --fs-md:  14px;   /* body default */
  --fs-lg:  16px;   /* emphasised body / section intro */
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight:  -0.015em;
  --tracking-snug:   -0.008em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ========== SPACING · 4px grid ========== */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-12: 64px;

  /* ========== RADII ==========
     Smaller than marketing — internal tools are rectangular, not pill-y.
     Pill is still available for badges + circular avatars. */
  --radius-xs:   3px;
  --radius-sm:   6px;     /* inputs, cells, mini-cards */
  --radius-md:   8px;     /* default cards, buttons */
  --radius-lg:   10px;    /* panels */
  --radius-xl:   14px;    /* modals, large drawers */
  --radius-pill: 999px;

  /* ========== SHADOWS — Notion-subtle ========== */
  --shadow-xs:    0 1px 2px rgba(14,14,16,0.04);
  --shadow-sm:    0 1px 3px rgba(14,14,16,0.06), 0 1px 2px rgba(14,14,16,0.03);
  --shadow-md:    0 4px 12px rgba(14,14,16,0.08), 0 1px 3px rgba(14,14,16,0.04);
  --shadow-lg:    0 12px 28px rgba(14,14,16,0.10), 0 4px 8px rgba(14,14,16,0.05);
  --shadow-focus: 0 0 0 3px var(--accent-ring);

  /* ========== MOTION ========== */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:  100ms;
  --dur-med:   160ms;
  --dur-slow:  240ms;

  /* ========== LAYOUT ========== */
  --container:      1080px;
  --container-wide: 1280px;
  --container-full: 1440px;

  /* ========== APP CHROME ==========
     Common surfaces for 2-pane + 3-pane apps. */
  --chrome-topbar-h:   44px;
  --chrome-sidebar-w:  232px;
  --chrome-col-gap:    1px;    /* hairline between app columns */
}

/* ========== BASE ==========
   Elements look right without classes. */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection-bg); }

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .h2 {
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .p {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}
small, .small { font-size: var(--fs-sm); color: var(--fg-3); }

.caption,
.eyebrow {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
  font-weight: 700;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
kbd {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.85em;
  color: var(--fg-2);
  background: var(--bg-sunken);
  border: 1px solid var(--line-1);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
}

/* The brand's marker eyebrow — allowed sparingly, once per screen max. */
.marker {
  font-family: var(--font-marker);
  font-weight: 400;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--marker-cyan);
  display: inline-block;
  transform: rotate(-2deg);
}
.marker--cyan   { color: var(--marker-cyan); }
.marker--yellow { color: var(--marker-yellow); }
.marker--purple { color: var(--marker-purple); }
.marker--green  { color: var(--marker-green); }
.marker--red    { color: var(--marker-red); }