/* Enten Systems — tokens.css
   Single, consolidated foundation file. Every CSS custom property
   the design system depends on lives here. Drop into a static site
   as the first stylesheet; component CSS reads from these vars.

   Light theme only. Romanian-first content.

   This file is self-contained: it imports the @font-face declarations
   so a page only needs to <link> tokens.css + base.css to bootstrap.
*/

@import url('./fonts/fonts.css');

:root {
  /* ============================================================
     COLORS — Brand
     ============================================================ */
  --brand-green:        #3FA535; /* Primary accent. Buttons, links, the "active" green. Sampled from logo. */
  --brand-green-deep:   #1F6B2D; /* Headings on light backgrounds, hover states, overline color. */
  --brand-green-soft:   #E8F3E5; /* Tinted surfaces, callout backgrounds, ::selection bg. */
  --brand-brown:        #5A3A1F; /* Heritage accent — wordmark color. Use sparingly. */

  /* ============================================================
     COLORS — Neutrals (warm, not steel)
     ============================================================ */
  --ink-900:        #1A1F1B; /* Primary text, headlines. */
  --ink-700:        #3D453F; /* Body copy. */
  --ink-500:        #6B7470; /* Secondary text, captions, micro-copy. */
  --ink-300:        #B8C0BC; /* Disabled text, muted glyphs. */
  --surface-0:      #FFFFFF; /* Page background. */
  --surface-50:     #FAFBF9; /* Alternating section bands. */
  --surface-100:    #F1F4EF; /* Cards, inputs, quiet panels. */
  --border-soft:    #E4E8E2; /* Hairlines, dividers. */
  --border-strong:  #B8C0BC; /* Form input borders, interactive borders. */

  /* ============================================================
     COLORS — State
     ============================================================ */
  --state-success: #2F8A3A;
  --state-warning: #D08F2C;
  --state-danger:  #C13B2A;
  --state-info:    #2D6FB8;

  /* ============================================================
     COLORS — Data viz
     Sequential ramp = quantitative gradients (heatmaps, choropleths).
     Categorical = up to 4 distinct series.
     ============================================================ */
  --viz-seq-1: #E8F3E5;
  --viz-seq-2: #B8DCB0;
  --viz-seq-3: #7FBE74;
  --viz-seq-4: #3FA535;
  --viz-seq-5: #1F6B2D;
  --viz-cat-1: #3FA535; /* Brand green */
  --viz-cat-2: #2D6FB8; /* Info blue */
  --viz-cat-3: #D08F2C; /* Warm amber */
  --viz-cat-4: #5A3A1F; /* Heritage brown */

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-sans-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============================================================
     TYPE — Scale (1.250 modular ratio, 16px base)
     Each token is a `font` shorthand: weight size/line-height family.
     Apply with: font: var(--font-h3);
     ============================================================ */
  --font-display-xl: 700 64px/68px var(--font-sans-display); /* Hero headlines */
  --font-display-l:  700 48px/56px var(--font-sans-display); /* Page heros */
  --font-display-m:  600 36px/44px var(--font-sans-display); /* Section H2 */
  --font-h3:         600 24px/32px var(--font-sans-display); /* Card titles, sub-section */
  --font-h4:         600 20px/28px var(--font-sans-display); /* Inline headings */
  --font-body-l:     400 18px/28px var(--font-sans-body);    /* Lead paragraphs */
  --font-body:       400 16px/26px var(--font-sans-body);    /* Default body */
  --font-body-s:     400 14px/22px var(--font-sans-body);    /* Captions, microcopy */
  --font-overline:   600 13px/16px var(--font-sans-display); /* Eyebrows (use uppercase + tracking) */
  --font-mono-s:     500 14px/22px var(--font-mono);         /* Code, kbd, data labels */

  /* TYPE — Tracking (apply alongside font shorthand) */
  --tracking-display:  -0.02em;
  --tracking-h3:       -0.01em;
  --tracking-overline:  0.08em;

  /* ============================================================
     SPACING — 8pt grid
     ============================================================ */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-8:   48px;
  --space-10:  64px;
  --space-12:  96px;
  --space-16: 128px;
  --space-20: 160px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm:    6px;  /* Inputs, small chips */
  --radius-md:   12px;  /* Cards, buttons */
  --radius-lg:   20px;  /* Large surfaces, hero panels */
  --radius-pill: 999px; /* Tags, pill buttons */

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(26, 31, 27, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 31, 27, 0.08), 0 1px 3px rgba(26, 31, 27, 0.04);
  --shadow-lg: 0 16px 40px rgba(26, 31, 27, 0.10), 0 4px 12px rgba(26, 31, 27, 0.06);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --content-max: 1280px;
  --gutter:        24px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur-med:  400ms;

  /* ============================================================
     BREAKPOINTS — used in @media queries throughout
     Note: CSS doesn't (yet) allow custom properties inside @media
     queries themselves. The tokens are documented here for ref;
     the @media rules use the literal pixel values.
     ============================================================ */
  --bp-sm:  640px;  /* phone landscape, small tablet portrait */
  --bp-md:  768px;  /* tablet portrait */
  --bp-lg: 1024px;  /* tablet landscape, small laptop */
  --bp-xl: 1280px;  /* desktop content width target */
}