/* ============================================================
   VINDEXA — COLORS & TYPE
   The real-time compliance engine for clean energy.
   ============================================================
   Import in any page:
     <link rel="stylesheet" href="/styles/tokens.css">
   ------------------------------------------------------------ */

/* ---------- Webfonts ----------
   Display + UI:  Plus Jakarta Sans — humanist geometric sans
                  whose double-story 'a' and open apertures
                  echo the Vindexa wordmark.
   Mono:          JetBrains Mono — used for IDs, dollar amounts,
                  payroll periods, code/audit strings.
   ⚠️  Substitution: the wordmark itself is a custom logotype.
   These Google Fonts are the closest UI match. Always use the
   /assets/vindexa-wordmark.svg for the actual logo.

   Loaded via <link> in the HTML head (faster than @import,
   which is render-blocking and serial). */

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     ============================================================ */

  /* Brand sage — the Vindexa green. Used for the wordmark,
     primary accents, deadline cards, avatar fills. */
  --sage-50:  #f1f4ec;
  --sage-100: #dde5d2;
  --sage-200: #c4d2b1;
  --sage-300: #a7b98c;
  --sage-400: #93a281;  /* hover lighter */
  --sage-500: #7f9267;  /* PRIMARY — Vindexa sage */
  --sage-600: #6a7d54;
  --sage-700: #556641;
  --sage-800: #3f4c30;
  --sage-900: #2a3320;

  /* Sand — the warm cream that pervades the product canvas.
     This is the "page" color. White cards float on it. */
  --sand-50:  #faf7f0;
  --sand-100: #f6f2e8;
  --sand-200: #f2f0eb;  /* card-soft / inactive surfaces */
  --sand-300: #ebe4d4;  /* PAGE BACKGROUND */
  --sand-400: #ddd4be;
  --sand-500: #c9bea2;
  --sand-600: #a89c80;

  /* Warm Ink — near-black with a brown undertone so it sits
     comfortably on cream. Never use pure #000. */
  --ink-50:  #f7f5f1;
  --ink-100: #e8e4dc;
  --ink-200: #c9c4bb;
  --ink-300: #9a958b;
  --ink-400: #67635c;  /* secondary text */
  --ink-500: #3e3b35;
  --ink-600: #2c2825;  /* logo-rounded-square fill */
  --ink-700: #1d1b17;
  --ink-800: #120f0a;  /* PRIMARY INK — body, headings */
  --ink-900: #0a0805;

  /* Action — coral/orange used SPARINGLY for action-required
     states, deadlines, badge counts. This is alarm, not delight. */
  --action-50:  #fff4f1;
  --action-100: #ffe2de;  /* soft pill bg (e.g. Wage Adjustment) */
  --action-200: #ffc7bc;
  --action-300: #ff9b85;
  --action-400: #f47452;
  --action-500: #ef5425;  /* PRIMARY ACTION — badges, counts */
  --action-600: #d83f12;
  --action-700: #ad3210;

  /* Functional semantics */
  --success:    #5b8a4a;
  --success-bg: #e3ecd9;
  --warning:    #d4a017;
  --warning-bg: #faf0d1;
  --danger:     #c1372a;
  --danger-bg:  #fadcd7;
  --info:       #4b6b87;
  --info-bg:    #dde6ef;

  /* ============================================================
     COLOR — SEMANTIC TOKENS
     Always reference these in components, never the raw vars.
     ============================================================ */
  --bg-page:        var(--sand-300);
  --bg-canvas:      var(--sand-300);
  --bg-surface:     #ffffff;            /* cards, sidebars */
  --bg-surface-2:   var(--sand-200);    /* inset / nested */
  --bg-surface-3:   var(--sand-100);
  --bg-inverse:     var(--ink-800);     /* dark mode surfaces */
  --bg-brand:       var(--sage-500);
  --bg-brand-soft:  var(--sage-50);

  --fg-default:     var(--ink-800);
  --fg-muted:       var(--ink-400);
  --fg-subtle:      var(--ink-300);
  --fg-on-brand:    #ffffff;
  --fg-on-inverse:  var(--sand-300);
  --fg-brand:       var(--sage-600);
  --fg-action:      var(--action-500);

  --border-default: rgba(18, 15, 10, 0.08);
  --border-strong:  rgba(18, 15, 10, 0.16);
  --border-brand:   var(--sage-500);
  --border-on-inverse: rgba(255, 255, 255, 0.12);

  /* ============================================================
     TYPOGRAPHY — RAW
     ============================================================ */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Sizes — a tight modular scale, ~1.2 ratio in the body
     range, opening up at display sizes. */
  --fs-xs:   11px;   --lh-xs:   16px;
  --fs-sm:   13px;   --lh-sm:   18px;
  --fs-base: 14px;   --lh-base: 20px;
  --fs-md:   16px;   --lh-md:   24px;
  --fs-lg:   18px;   --lh-lg:   26px;
  --fs-xl:   22px;   --lh-xl:   30px;
  --fs-2xl:  28px;   --lh-2xl:  36px;
  --fs-3xl:  36px;   --lh-3xl:  44px;
  --fs-4xl:  48px;   --lh-4xl:  56px;
  --fs-5xl:  64px;   --lh-5xl:  72px;
  --fs-6xl:  80px;   --lh-6xl:  84px;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Letter-spacing — eyebrows / overlines use generous tracking */
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.12em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --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;

  /* ============================================================
     RADII — generous on cards, pill on pills
     ============================================================ */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    10px;   /* default card */
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-pill:  999px;

  /* ============================================================
     ELEVATION — soft, warm, never gray
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(18, 15, 10, 0.04);
  --shadow-sm: 0 1px 3px rgba(18, 15, 10, 0.06), 0 1px 2px rgba(18, 15, 10, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 15, 10, 0.06), 0 2px 4px rgba(18, 15, 10, 0.04);
  --shadow-lg: 0 12px 32px rgba(18, 15, 10, 0.08), 0 4px 8px rgba(18, 15, 10, 0.04);
  --shadow-xl: 0 24px 64px rgba(18, 15, 10, 0.12);
  --shadow-focus: 0 0 0 3px rgba(127, 146, 103, 0.3);   /* sage focus ring */
  --shadow-focus-action: 0 0 0 3px rgba(239, 84, 37, 0.3);

  /* ============================================================
     MOTION — calm, mechanical. Compliance software, not a game.
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1.1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Apply directly to elements, or use as a reference for
   component styles. All sizes/leading are paired.
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-5xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-default);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-default);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--fg-default);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  color: var(--fg-default);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-default);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--fg-muted);
}

.t-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--fg-default);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-default);
  font-feature-settings: "tnum", "ss01";
}

.t-figure {
  /* Tabular numbers for money/hours — the heart of compliance UI */
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-default);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

::selection { background: var(--sage-200); color: var(--ink-800); }