/* Geekcon AI Studio — tokens. Same "Geekcon Lab" palette as the class stage and the Mission Board
   (BUILD-CONTRACT §1): ink-black lab, amber of the logo's glasses = people / decisions / emphasis,
   cyan = data and automation, one hue per department. App type scale (not the 1920 stage scale). */

:root {
  --ink-950: #0B0A0B;
  --ink-900: #141213;
  --ink-850: #1A1718;
  --ink-800: #211D1E;
  --ink-700: #2E2A2B;
  --line: #3A3536;
  --line-soft: rgba(255, 241, 210, 0.12);
  --amber-500: #FDB219;
  --amber-400: #FFC547;
  --amber-300: #FFD27A;
  --amber-100: #FFF1D2;
  --amber-700: #B97C00;
  --cyan-400: #3FD8F2;
  --cyan-300: #74E4F6;
  --cyan-200: #A8F1FF;
  --cyan-700: #0E7F92;
  --paper: #F5F2EC;
  --paper-doc: #F4EFE4;
  --mute: #A79F9A;
  --dim: rgba(245, 242, 236, 0.72);
  --faint: rgba(245, 242, 236, 0.46);

  --ok: #5BE3A4;
  --warn: #FFC24D;
  --stop: #FF6B6B;
  --dup: #B39DFF;
  --human: #FDB219;

  --dept-content: #FFD27A;
  --dept-seo: #3FD8F2;
  --dept-data: #5BE3A4;
  --dept-design: #FF8F6B;
  --dept-mgmt: #C9B8FF;
  --dept-qa: #F5F2EC;

  --grad-amber: linear-gradient(176deg, #FFF8E8 4%, #FFE3A3 30%, #FDB219 66%, #E08C00 100%);
  --grad-btn: linear-gradient(180deg, #FFD36B 0%, #FDB219 55%, #E89A00 100%);
  --grad-glass: linear-gradient(160deg, rgba(255, 241, 210, 0.07), rgba(28, 25, 26, 0.78) 46%, rgba(11, 10, 11, 0.86));

  --font-display: "Mitr", "Noto Sans Thai Looped", system-ui, sans-serif;
  --font-body: "Noto Sans Thai Looped", "Mitr", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fs-hero: clamp(38px, 2.4vw + 18px, 78px);
  --fs-h1: clamp(28px, 1.3vw + 16px, 46px);
  --fs-h2: clamp(21px, 0.6vw + 15px, 29px);
  --fs-h3: clamp(17px, 0.3vw + 13px, 21px);
  --fs-body: clamp(15px, 0.22vw + 12px, 17.5px);
  --fs-small: clamp(13px, 0.14vw + 11px, 15px);
  --fs-tiny: 12.5px;

  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 28px;
  --sp-5: 44px;
  --sp-6: 72px;
  --pad: clamp(18px, 2.4vw, 48px);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shadow-panel: 0 30px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 241, 210, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  --shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  --glow-amber: 0 0 0 1px rgba(253, 178, 25, 0.55), 0 10px 40px -8px rgba(253, 178, 25, 0.45);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  --rail-w: 248px;
  --tabs-h: 66px;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}

/* department colour hooks — set --dc on any element */
.d-content { --dc: var(--dept-content); }
.d-seo { --dc: var(--dept-seo); }
.d-data { --dc: var(--dept-data); }
.d-design { --dc: var(--dept-design); }
.d-mgmt { --dc: var(--dept-mgmt); }
.d-qa { --dc: var(--dept-qa); }