/* ============================================================
 * NUtec Digital Ink — Colors & Type Tokens (slice subset)
 * Source: colors_and_type.css from the Claude Design concept
 * (brand guidelines Jan 2025). @font-face blocks omitted — the
 * licensed Futura/Bauhaus .otf files are not shipped with the
 * slice; the font stacks below fall back gracefully.
 * ============================================================ */

:root {
  /* Corporate palette */
  --nu-olive:        #89925E;
  --nu-olive-700:    #6c7349;
  --nu-olive-300:    #b3b88f;
  --nu-olive-100:    #e7e9da;

  --nu-grey:         #646567;
  --nu-grey-700:     #4a4b4d;
  --nu-grey-500:     #8a8b8d;
  --nu-grey-300:     #c6c7c8;
  --nu-grey-100:     #e9e9ea;
  --nu-grey-050:     #f5f5f6;

  --nu-black:        #1a1a1a;
  --nu-white:        #ffffff;

  /* Ink colour identifiers */
  --ink-cyan:        #009ee0;
  --ink-magenta:     #e6007a;
  --ink-yellow:      #ffed00;
  --ink-black:       #000000;
  --ink-light-cyan:  #84d0f0;
  --ink-light-magenta:#f19fc1;
  --ink-light-yellow:#fff59b;
  --ink-light-black: #9c9e9f;
  --ink-violet:      #3e277b;
  --ink-orange:      #e95d0f;
  --ink-green:       #1fa22e;
  --ink-fluor-pink:  #e53262;
  --ink-white:       #ecedee;
  --ink-varnish:     #ecedee;

  /* Product family gemstones */
  --gem-diamond:     #040404;
  --gem-topaz:       #f07f05;
  --gem-quartz:      #974481;
  --gem-amethyst:    #713a8e;
  --gem-sapphire:    #4767ae;
  --gem-ruby:        #d6152e;
  --gem-aquamarine:  #04a6b8;
  --gem-emerald:     #049060;
  --gem-granite:     #d7b14c;
  --prod-nucoat:     #bcd4f0;

  /* Semantic tokens */
  --bg:              var(--nu-white);
  --bg-soft:         var(--nu-grey-050);
  --surface:         var(--nu-white);
  --fg:              var(--nu-black);
  --fg-strong:       var(--nu-black);
  --fg-muted:        var(--nu-grey);
  --fg-subtle:       var(--nu-grey-500);
  --border:          var(--nu-grey-300);
  --border-subtle:   var(--nu-grey-100);
  --brand:           var(--nu-olive);
  --brand-hover:     var(--nu-olive-700);
  --brand-tint:      var(--nu-olive-100);
  --success:         #2e8b3d;
  --warning:         #d49000;
  --danger:          #c8102e;
  --info:            #00a3b4;
  --focus-ring:      0 0 0 3px rgba(137,146,94,0.35);

  /* Type */
  --font-display:    'Bauhaus Std', 'Bauhaus 93', 'ITC Bauhaus', 'Century Gothic', system-ui, sans-serif;
  --font-body:       'Futura Std', 'Futura', 'Avenir Next', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', 'Cascadia 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-38: 2.375rem;

  --tracking-wide:   0.04em;
  --tracking-wider:  0.14em;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.06);
  --shadow-sm: 0 2px 6px rgba(26,26,26,0.08);
  --shadow-md: 0 6px 16px rgba(26,26,26,0.10);
}

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--fg-strong); }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; }