/* Senken design tokens — extracted from tools-pages/app/globals.css.
   Source of truth: keep this file aligned with the Senken brand. */

@font-face {
  font-family: "Jokker";
  src: url("../fonts/JokkerVF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ COLORS ============ */
  --color-white: #FFFFFF;
  --color-quartz: #F4F4F4;

  --color-obsidian-50: #F7F7F7;
  --color-obsidian-100: #E3E3E3;
  --color-obsidian-200: #C8C8C8;
  --color-obsidian-300: #A4A4A4;
  --color-obsidian-400: #818181;
  --color-obsidian-500: #666666;
  --color-obsidian-600: #515151;
  --color-obsidian-800: #383838;
  --color-obsidian-950: #202020;

  --color-enstatite-25:  #F8F6F4;
  --color-enstatite-50:  #F8F6F4;
  --color-enstatite-100: #EFECE5;
  --color-enstatite-200: #DED6CA;

  --color-jade-50:  #F5F5F0;
  --color-jade-100: #E8EADD;
  --color-jade-200: #D4D7BF;
  --color-jade-300: #B7BD99;
  --color-jade-400: #9BA477;
  --color-jade-500: #7F8959;
  --color-jade-600: #626B45;
  --color-jade-700: #4C5437;
  --color-jade-800: #3D422E;
  --color-jade-900: #373C2B;
  --color-jade-950: #1C1F14;

  --color-jasper-300: #ECFF50;
  --color-jasper-400: #DAFF00;   /* signature electric chartreuse */
  --color-jasper-500: #BFE600;
  --color-jasper-950: #263400;

  --color-agate-100: #E6E8DF;
  --color-agate-800: #3D4232;

  --color-sapphire-50:  #EDFCFF;
  --color-sapphire-600: #06A7FF;

  /* Semantic aliases */
  --color-bg:           #FFFFFF;
  --color-bg-tint:      var(--color-enstatite-50);
  --color-bg-dark:      var(--color-obsidian-950);
  --color-bg-forest:    var(--color-jade-950);
  --color-fg:           var(--color-obsidian-950);
  --color-fg-muted:     var(--color-obsidian-600);
  --color-fg-subtle:    var(--color-obsidian-500);
  --color-fg-on-dark:   var(--color-quartz);
  --color-fg-on-forest: var(--color-jasper-400);
  --color-border:       var(--color-obsidian-100);
  --color-border-strong: var(--color-obsidian-200);

  /* ============ TYPOGRAPHY ============ */
  --font-sans: "Jokker", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — senken.io marketing pattern: fixed sizes on desktop, scaled down on mobile */
  --fs-display: clamp(40px, 5vw, 72px);   /* h1, hero only */
  --fs-h1:      clamp(32px, 3.5vw, 48px); /* large section heading */
  --fs-h2:      clamp(28px, 2.8vw, 40px); /* standard section heading */
  --fs-h3:      20px;
  --fs-h4:      18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-xs:      12px;
  --fs-eyebrow: 11px;

  /* Line height — match senken.io 1.1 / 1.2 / 1.5 pattern */
  --lh-display: 1.10;
  --lh-heading: 1.15;
  --lh-small-h: 1.20;
  --lh-body-lg: 1.45;
  --lh-body:    1.50;

  /* Letter spacing — senken.io uses NORMAL on headings */
  --tr-headline: 0;
  --tr-body:     0;
  --tr-eyebrow:  0.14em;

  /* ============ RADII ============ */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 100px;

  /* ============ SHADOWS ============ */
  --shadow-sm: 0px 2px 8px rgba(32, 32, 32, 0.08);
  --shadow-md: 0px 4px 16px rgba(32, 32, 32, 0.10);
  --shadow-lg: 0px 8px 32px rgba(32, 32, 32, 0.14);

  /* ============ LAYOUT ============ */
  --container-max: 1280px;
  --container-px:  24px;
  --container-px-md: 40px;

  --nav-h: 80px;

  /* ============ MOTION ============ */
  --dur-fast:     150ms;
  --dur-medium:   240ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--color-jasper-400); color: var(--color-obsidian-950); }