/* ============================================================================
   TRYAMBAK DESIGN SYSTEM — tokens.css
   The single, canonical source of truth for the Tryambak brand.
   Link this FIRST, before styles.css (site) or any prototype stylesheet:

     <link rel="stylesheet" href="/tokens.css" />
     <link rel="stylesheet" href="/styles.css" />

   Every surface — the marketing site and every system prototype — inherits
   these values, so the whole library reads as one studio. Do not hard-code
   brand colors, spacing, or radii anywhere else; reference these tokens.
   ============================================================================ */

:root{
  /* ---- Ink & text --------------------------------------------------------- */
  --ink:        #181818;   /* near-black — primary text + buttons */
  --ink-2:      #1F2328;
  --muted:      #65717C;   /* secondary text */
  --muted-2:    #8A94A0;   /* faint captions */

  /* ---- Surfaces ----------------------------------------------------------- */
  --ground:     #F0F6F9;   /* page background (cool light) */
  --white:      #FFFFFF;
  --line:       #D9E0E3;   /* hairline border */
  --line-2:     #E5E9F1;   /* fainter hairline */

  /* ---- Brand accent (aqua) ------------------------------------------------ */
  --accent:     #0AA6C7;   /* aqua — the brand color */
  --accent-ink: #076C82;   /* deep aqua — accent text on light */
  --accent-soft:#E1F5F9;   /* aqua tint fill */
  --blue:       #1077D7;   /* secondary accent */

  /* ---- Dark showcase ------------------------------------------------------ */
  --dark:       #0E1116;   /* dark panel / footer ground */
  --dark-2:     #171B22;   /* raised surface on dark */

  /* ---- Text on dark ------------------------------------------------------- */
  --on-dark:        #E9EEF2;
  --on-dark-muted:  #A9B4BE;
  --on-dark-aqua:   #45CFE8;

  /* ---- Typography --------------------------------------------------------- */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-caption: "Caveat", "Segoe Script", "Bradley Hand", cursive; /* handwritten demo captions */
  --sans: var(--font-sans);  /* legacy alias */

  --weight-body:     400;
  --weight-medium:   500;   /* headings use this — kore-style */
  --weight-semibold: 600;

  --tracking-hero:    -.035em;
  --tracking-title:   -.028em;
  --tracking-tight:   -.015em;
  --tracking-eyebrow:  .16em;   /* uppercase labels */
  --tracking-button:   .06em;

  /* fluid type scale */
  --text-hero:    clamp(38px, 6.6vw, 66px);
  --text-h2:      clamp(28px, 4.2vw, 44px);
  --text-h3:      clamp(21px, 3vw, 29px);
  --text-lead:    18px;
  --text-body:    17px;
  --text-sm:      15px;
  --text-xs:      13px;
  --text-eyebrow: 12.5px;
  --leading-tight: 1.1;
  --leading-body:  1.6;

  /* ---- Spacing scale ------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --section-pad: clamp(60px, 8vw, 104px);   /* vertical padding for major sections */

  /* ---- Layout ------------------------------------------------------------- */
  --wrap: 1120px;                     /* max content width */
  --pad:  clamp(20px, 5vw, 40px);     /* horizontal gutter */

  /* ---- Radii -------------------------------------------------------------- */
  --radius-sm:   6px;    /* buttons, inputs */
  --radius-md:   14px;   /* cards */
  --radius-lg:   20px;   /* large panels / showcase */
  --radius-pill: 999px;  /* badges, chips */
  --radius: var(--radius-sm);  /* legacy alias */

  /* ---- Shadows ------------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(24,24,24,.04);            /* subtle lift */
  --shadow-2: 0 14px 30px -22px rgba(24,24,24,.45);    /* card hover */
  --shadow-3: 0 12px 28px rgba(0,0,0,.08);             /* floating panel */
  --shadow-focus: 0 0 0 3px rgba(10,166,199,.15);      /* input focus ring */

  /* ---- Motion ------------------------------------------------------------- */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  .15s;
  --dur:       .18s;
  --dur-slow:  .6s;

  /* ---- Button (small, uppercase, black) ----------------------------------- */
  --btn-bg:       var(--ink);
  --btn-fg:       #FFFFFF;
  --btn-pad-y:    14px;
  --btn-pad-x:    22px;
  --btn-radius:   var(--radius-sm);
  --btn-size:     13px;
  --btn-tracking: var(--tracking-button);
}