/* ==========================================================================
   TECH4ART DESIGN SYSTEM — TOKENS
   Recreated from the design-system guide. 115 custom properties.
   Palette sampled from the brand "A" mark: olive-green → teal → deep blue.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* === BRAND PALETTE — sampled from the master "A" mark === */
  --t4a-green-deep:   #5A6D24;
  --t4a-green-dark:   #738C30;
  --t4a-green:        #8FA53D;
  --t4a-teal-deep:    #0F6F7B;
  --t4a-teal:         #1898A8;
  --t4a-teal-bright:  #2BC0CF;
  --t4a-blue-deep:    #0E4E8E;
  --t4a-blue:         #1668B8;
  --t4a-blue-bright:  #2786D4;
  --t4a-blue-ink:     #0E2440;

  /* Semantic accents (borrow from brand family) */
  --t4a-success:      #6F9A2A;
  --t4a-info:         #1898A8;
  --t4a-warning:      #C58A1A;
  --t4a-danger:       #B0392E;

  /* Cool blue-tinted neutrals */
  --t4a-neutral-0:    #FFFFFF;
  --t4a-neutral-50:   #F6F8FB;
  --t4a-neutral-100:  #EEF1F6;
  --t4a-neutral-200:  #DDE3ED;
  --t4a-neutral-300:  #C2CBDA;
  --t4a-neutral-400:  #95A1B4;
  --t4a-neutral-500:  #6B7790;
  --t4a-neutral-600:  #4D586E;
  --t4a-neutral-700:  #364055;
  --t4a-neutral-800:  #1F2839;
  --t4a-neutral-900:  #0E1626;

  /* === SEMANTIC TOKENS — light mode === */
  --bg:               var(--t4a-neutral-0);
  --bg-subtle:        var(--t4a-neutral-50);
  --bg-muted:         var(--t4a-neutral-100);
  --bg-inverse:       var(--t4a-blue-ink);
  --surface:          var(--t4a-neutral-0);
  --surface-raised:   var(--t4a-neutral-0);
  --surface-sunken:   var(--t4a-neutral-50);

  --fg:               var(--t4a-neutral-900);
  --fg-1:             var(--t4a-neutral-900);
  --fg-2:             var(--t4a-neutral-700);
  --fg-3:             var(--t4a-neutral-500);
  --fg-muted:         var(--t4a-neutral-400);
  --fg-inverse:       var(--t4a-neutral-0);
  --fg-on-brand:      var(--t4a-neutral-0);

  --border:           var(--t4a-neutral-200);
  --border-strong:    var(--t4a-neutral-300);
  --border-inverse:   rgba(255,255,255,0.16);

  --accent:           var(--t4a-teal);
  --accent-strong:    var(--t4a-teal-deep);
  --accent-warm:      var(--t4a-green);

  --link:             var(--t4a-blue);
  --link-hover:       var(--t4a-blue-deep);

  /* === GRADIENTS — always 4-stop === */
  --gradient-signature:
    linear-gradient(135deg,
      var(--t4a-green) 0%,
      var(--t4a-teal) 38%,
      var(--t4a-blue) 72%,
      var(--t4a-blue-ink) 100%);

  --gradient-cool:
    linear-gradient(180deg,
      var(--t4a-teal-bright) 0%,
      var(--t4a-teal) 38%,
      var(--t4a-blue) 72%,
      var(--t4a-blue-ink) 100%);

  --gradient-warm-ridge:
    linear-gradient(90deg,
      var(--t4a-green-deep) 0%,
      var(--t4a-green) 34%,
      var(--t4a-teal) 68%,
      var(--t4a-blue) 100%);

  --gradient-ink:
    linear-gradient(180deg,
      var(--t4a-blue-ink) 0%,
      var(--t4a-blue-deep) 40%,
      var(--t4a-teal-deep) 75%,
      var(--t4a-teal) 100%);

  /* === TYPE === */
  --font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tr-tight:    -0.02em;
  --tr-snug:     -0.01em;
  --tr-normal:   0;
  --tr-wide:     0.04em;
  --tr-wider:    0.12em;

  /* === SPACING — 4px baseline === */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* === CONTAINERS === */
  --container-narrow: 720px;
  --container:        1180px;
  --container-wide:   1440px;

  /* === RADII — sharp by default === */
  --radius-0:    0px;
  --radius-1:    2px;
  --radius-pill: 9999px;

  /* === BORDER WIDTHS === */
  --bw-1:        1px;
  --bw-2:        2px;
  --bw-accent:   3px;

  /* === SHADOWS — cool-tinted, low-spread === */
  --shadow-1:     0 1px 2px rgba(14,36,64,0.06), 0 1px 1px rgba(14,36,64,0.04);
  --shadow-2:     0 4px 14px rgba(14,36,64,0.08), 0 1px 3px rgba(14,36,64,0.06);
  --shadow-3:     0 16px 40px rgba(14,36,64,0.14), 0 4px 12px rgba(14,36,64,0.08);
  --shadow-focus: 0 0 0 3px rgba(24,152,168,0.35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.18);

  /* === MOTION === */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   DARK MODE — inverse semantics
   ============================================================ */
[data-theme="dark"] {
  --bg:             #06101F;
  --bg-subtle:      #0B1A2E;
  --bg-muted:       #122339;
  --bg-inverse:     var(--t4a-neutral-0);
  --surface:        #0B1A2E;
  --surface-raised: #122339;
  --surface-sunken: #06101F;

  --fg:             var(--t4a-neutral-50);
  --fg-1:           var(--t4a-neutral-0);
  --fg-2:           var(--t4a-neutral-200);
  --fg-3:           var(--t4a-neutral-400);
  --fg-muted:       var(--t4a-neutral-500);
  --fg-inverse:     var(--t4a-neutral-900);
  --fg-on-brand:    var(--t4a-neutral-0);

  --border:         rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.20);
  --border-inverse: var(--t4a-neutral-200);

  --accent:         var(--t4a-teal-bright);
  --accent-strong:  var(--t4a-teal);

  --link:           var(--t4a-teal-bright);
  --link-hover:     var(--t4a-blue-bright);

  --shadow-1:     0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:     0 6px 18px rgba(0,0,0,0.45);
  --shadow-3:     0 18px 44px rgba(0,0,0,0.55);
}