/* =============================================================
   NOTA — Colors & Type Foundations
   Dark-first system. Imported by every Nota artifact.
   ============================================================= */

/* ---------- Webfonts ----------
   Josefin Sans (Google Fonts) — wordmark / rare display only
   Avenir Next + Avenir Next Condensed — local .ttf, the workhorse
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap');

/* Avenir Next */
@font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 200; src: url('fonts/avenir_next_ultra_light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 200; src: url('fonts/avenir_next_ultra_light_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 400; src: url('fonts/avenir_next_regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 400; src: url('fonts/avenir_next_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 500; src: url('fonts/avenir_next_medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 500; src: url('fonts/avenir_next_medium_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 600; src: url('fonts/avenir_next_demi_bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 600; src: url('fonts/avenir_next_demi_bold_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 700; src: url('fonts/avenir_next_bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 700; src: url('fonts/avenir_next_bold_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: normal; font-weight: 900; src: url('fonts/avenir_next_heavy.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next'; font-style: italic; font-weight: 900; src: url('fonts/avenir_next_heavy_italic.ttf') format('truetype'); font-display: swap; }

/* Avenir Next Condensed */
@font-face { font-family: 'Avenir Next Condensed'; font-style: normal; font-weight: 200; src: url('fonts/avenir_next_condensed_ultra_light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: italic; font-weight: 200; src: url('fonts/avenir_next_condensed_ultra_light_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: normal; font-weight: 400; src: url('fonts/avenir_next_condensed_regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: italic; font-weight: 400; src: url('fonts/avenir_next_condensed_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: normal; font-weight: 500; src: url('fonts/avenir_next_condensed_medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: italic; font-weight: 500; src: url('fonts/avenir_next_condensed_medium_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: normal; font-weight: 600; src: url('fonts/avenir_next_condensed_demi_bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: italic; font-weight: 600; src: url('fonts/avenir_next_condensed_demi_bold_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: normal; font-weight: 700; src: url('fonts/avenir_next_condensed_bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: italic; font-weight: 700; src: url('fonts/avenir_next_condensed_bold_italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: normal; font-weight: 900; src: url('fonts/avenir_next_condensed_heavy.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Avenir Next Condensed'; font-style: italic; font-weight: 900; src: url('fonts/avenir_next_condensed_heavy_italic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ----------------------------------------------------------
     PALETTE — raw tokens
     ---------------------------------------------------------- */
  /* Surfaces (dark mode is canonical) */
  --nota-black:        #000000;
  --nota-ink:          #0e0e0f;   /* page background */
  --nota-surface:      #1c1c1e;   /* cards, sidebars */
  --nota-surface-2:    #2a2a2d;   /* raised surface, hover */
  --nota-surface-3:    #404043;   /* pressed / selected pill */
  --nota-hairline:     #2a2a2d;   /* 1px dividers on dark */

  /* Ink on dark */
  --nota-fg-1:         #ffffff;   /* primary text */
  --nota-fg-2:         #c8c8cc;   /* secondary text */
  --nota-fg-3:         #8a8a90;   /* tertiary / metadata */
  --nota-fg-4:         #5a5a60;   /* disabled, very low emphasis */

  /* Accents — the brand */
  --nota-lime:         #ddfb3b;   /* primary accent */
  --nota-lime-ink:     #0e0e0f;   /* text on lime */
  --nota-red:          #b40032;   /* brand red (deep) */
  --nota-red-bright:   #ff4246;   /* alert / live indicator */

  /* Operational status (from the floor-plan UI) */
  --nota-status-green:   #1ec74f;  /* seated / available */
  --nota-status-blue:    #0091ff;  /* upcoming / linked */
  --nota-status-orange:  #e6a931;  /* approaching / overdue soft */
  --nota-status-yellow:  #ddfb3b;  /* live / connected (uses lime) */
  --nota-status-violet:  #6b5cff;  /* combined / merged tables */
  --nota-status-gray:    #5a5a60;  /* finished / inactive */

  /* Light-mode mirrors (used sparingly, e.g. printed checks, receipts) */
  --nota-paper:        #f7f6f1;
  --nota-paper-ink:    #0e0e0f;

  /* ----------------------------------------------------------
     SEMANTIC TOKENS — prefer these in components
     ---------------------------------------------------------- */
  --bg:                var(--nota-ink);
  --bg-elevated:       var(--nota-surface);
  --bg-raised:         var(--nota-surface-2);
  --bg-pressed:        var(--nota-surface-3);
  --hairline:          var(--nota-hairline);

  --fg:                var(--nota-fg-1);
  --fg-muted:          var(--nota-fg-2);
  --fg-subtle:         var(--nota-fg-3);
  --fg-disabled:       var(--nota-fg-4);

  --accent:            var(--nota-lime);
  --accent-ink:        var(--nota-lime-ink);
  --danger:            var(--nota-red-bright);
  --danger-deep:       var(--nota-red);

  --ok:                var(--nota-status-green);
  --info:              var(--nota-status-blue);
  --warn:              var(--nota-status-orange);

  /* ----------------------------------------------------------
     TYPE — families
     Wordmark / display: Josefin Sans (geometric, lowercase)
     Product UI:         Avenir Next (200–900 + italics, local .ttf)
     Data / numerals:    Avenir Next Condensed (200–900 + italics, local .ttf)
     Mono (rarely):      ui-monospace stack
     ---------------------------------------------------------- */
  --font-display: 'Josefin Sans', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --font-ui:      'Avenir Next', 'Avenir', -apple-system, system-ui, sans-serif;
  --font-cond:    'Avenir Next Condensed', 'Avenir Next', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Type scale — built around 16px. UI is dense and tabular. */
  --fs-12: 12px;   --lh-12: 16px;
  --fs-13: 13px;   --lh-13: 18px;
  --fs-14: 14px;   --lh-14: 20px;
  --fs-16: 16px;   --lh-16: 22px;
  --fs-18: 18px;   --lh-18: 24px;
  --fs-22: 22px;   --lh-22: 28px;
  --fs-28: 28px;   --lh-28: 34px;
  --fs-36: 36px;   --lh-36: 42px;
  --fs-48: 48px;   --lh-48: 54px;
  --fs-64: 64px;   --lh-64: 68px;
  --fs-96: 96px;   --lh-96: 96px;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;  /* eyebrows, section labels */

  /* ----------------------------------------------------------
     SPACING (4-pt grid; tight, operational density)
     ---------------------------------------------------------- */
  --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: 56px;
  --space-11: 80px;

  /* ----------------------------------------------------------
     RADII — Nota leans on capsules + small chamfers
     ---------------------------------------------------------- */
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-pill:    999px;  /* most interactive elements */

  /* ----------------------------------------------------------
     ELEVATION — minimal. Dark UI uses surface deltas, not shadow.
     Reserve real shadows for floating menus & modals.
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-2: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-3: 0 18px 48px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.6);
  --shadow-glow-lime: 0 0 0 4px rgba(221,251,59,0.18);
  --shadow-focus:     0 0 0 2px var(--nota-lime);

  /* ----------------------------------------------------------
     MOTION — short, restrained, no bounces
     ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES — applied to bare HTML
   ============================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display (rarely used — marketing, splash screens, the wordmark) */
.nota-display, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-64);
  line-height: var(--lh-64);
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-36);
  line-height: var(--lh-36);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  margin: 0;
}

p, .body {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--fg-muted);
  margin: 0;
}

small, .caption {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--fg-subtle);
}

.eyebrow {
  font-family: var(--font-cond);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.numeral, .num {
  font-family: var(--font-cond);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-normal);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--fg-subtle);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: var(--space-7) 0;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Utility: tabular numerals for ledger-y data tables */
.tnum { font-variant-numeric: tabular-nums; }