@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* =========================================================
   tin.design — design tokens
   Layer 1: primitives (--palette-*)  → only used below
   Layer 2: semantic (--color-*, --type-*) → used by components
   Light theme only for now. A dark theme redefines layer 2.
   ========================================================= */

:root {
  /* ---------- Colour primitives ---------- */
  --palette-navy:        #011638; /* base */
  --palette-gray:        #788395; /* base */
  --palette-light:       #EEF0F2; /* base */
  --palette-yellow:      #FFFF02; /* base */
  --palette-white:       #FFFFFF;
  --palette-gray-dark:   #606D82; /* 80% gray + 20% navy */
  --palette-gray-light:  #D0D5DB; /* 75% light + 25% gray */
  --palette-navy-hover:  #192C4B; /* 80% navy + 20% gray */
  --palette-yellow-soft: #F4F59E; /* 65% light + 35% yellow */
  --palette-red:         #C8102E; /* destructive */
  --palette-red-soft:    #FAE7EA; /* 90% white + 10% red */
  --palette-red-hover:   #A01130; /* 80% red + 20% navy */
  --palette-red-soft-hover: #F7DADF; /* 94% red-soft + 6% red */

  /* ---------- Colour: semantic ---------- */
  --color-bg:              var(--palette-light);
  --color-surface:         var(--palette-white);
  --color-text:            var(--palette-navy);
  --color-text-secondary:  var(--palette-gray-dark);
  --color-icon:            var(--palette-gray);
  --color-border:          var(--palette-gray-light);
  --color-border-control:  var(--palette-gray);
  --color-accent:          var(--palette-navy);
  --color-accent-hover:    var(--palette-navy-hover);
  --color-on-accent:       var(--palette-light);
  --color-highlight:       var(--palette-yellow);
  --color-on-highlight:    var(--palette-navy);
  --color-highlight-soft:  var(--palette-yellow-soft);
  --color-focus:           var(--palette-navy);
  --color-danger:          var(--palette-red);
  --color-danger-bg:       var(--palette-red-soft);
  --color-on-danger:       var(--palette-white);
  --color-danger-hover:    var(--palette-red-hover);
  --color-danger-bg-hover: var(--palette-red-soft-hover);
  --color-fill-hover:      rgb(1 22 56 / 0.06);   /* navy wash, works on bg and surface */
  --color-fill-pressed:    rgb(1 22 56 / 0.10);
  --color-fill-inverse-hover:   rgb(238 240 242 / 0.12); /* light wash on navy */
  --color-fill-inverse-pressed: rgb(238 240 242 / 0.20);
  --color-disabled-bg:     var(--palette-gray-light);
  --color-disabled-text:   var(--palette-gray-dark);
  --color-shadow:          color-mix(in srgb, var(--palette-navy) 8%, transparent);

  /* ---------- Type: families ---------- */
  /* SF Pro on Apple devices (system font, not embedded), Inter everywhere else.
     Keep "Inter" before Segoe/Roboto and never put system-ui first. Inter only: no serif. */
  --font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type: weights ---------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- Type: roles ---------- */
  /* Headings are Inter medium (500). */
  --type-display-size: clamp(2.5rem, 1.2rem + 5.2vw, 5rem);        /* 40 → 80 */
  --type-display-leading: 1.05;
  --type-display-weight: var(--weight-medium);
  --type-display-tracking: -0.02em;

  --type-h1-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);             /* 32 → 44 */
  --type-h1-leading: 1.12;
  --type-h1-weight: var(--weight-medium);
  --type-h1-tracking: -0.015em;

  --type-h2-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);          /* 24 → 30 */
  --type-h2-leading: 1.2;
  --type-h2-weight: var(--weight-medium);
  --type-h2-tracking: -0.01em;

  --type-h3-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);       /* 19 → 22 */
  --type-h3-leading: 1.3;
  --type-h3-weight: var(--weight-medium);
  --type-h3-tracking: -0.005em;

  /* Project and section titles. */
  --type-title-size: 18px;
  --type-title-leading: 1.3;
  --type-title-weight: var(--weight-medium);
  --type-title-tracking: -0.014em;

  --type-lead-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);   /* 18 → 21 */
  --type-lead-leading: 1.5;
  --type-lead-tracking: -0.016em;

  --type-body-size: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);       /* 16 → 17 */
  --type-body-leading: 1.6;
  --type-body-tracking: -0.014em;

  --type-small-size: 0.875rem;    /* 14 */
  --type-small-leading: 1.5;
  --type-small-tracking: -0.014em;

  --type-label-size: 0.75rem;     /* 12 */
  --type-label-leading: 1.4;
  --type-label-weight: var(--weight-medium);
  --type-label-tracking: 0.06em;

  --type-ui-size: 0.9375rem;      /* 15 */
  --type-ui-leading: 1.45;
  --type-ui-tracking: -0.014em;

  --measure: 65ch;

  /* ---------- Space (4px base, for components) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --gap-hairline: 2px; /* column gap in the work grid; images sit edge to edge */

  /* ---------- Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;  /* every interaction: hover, press, focus. Keep interactions under 200ms */
  --duration-base: 250ms;  /* panels opening, the chat minimising */
  --duration-slow: 450ms;  /* page-level transitions only, like a card opening into a case study */
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* ---------- Hit area ---------- */
  --target-min: 44px; /* minimum touch target on touch screens */

  /* ---------- Layout (page level, fluid) ---------- */
  --page-max: 1040px;                          /* content width, gutters sit outside it */
  --gutter: clamp(16px, 4vw, 48px);            /* left and right page padding */
  --section-space: clamp(64px, 9vw, 128px);    /* between page sections */

  /* ---------- Icons (Phosphor Light, sprite: icons.svg) ---------- */
  --icon-size-sm: 16px;  /* inline with text */
  --icon-size-md: 20px;  /* buttons, default */
  --icon-size-lg: 24px;  /* standalone */
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: var(--color-highlight); color: var(--color-on-highlight); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Type role classes ---------- */
.t-display, .t-h1, .t-h2, .t-h3, .t-title { font-family: var(--font-body); text-wrap: balance; margin: 0; }
.t-display { font-size: var(--type-display-size); line-height: var(--type-display-leading); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); }
.t-h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-leading); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-tracking); }
.t-h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-leading); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-tracking); }
.t-h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-leading); font-weight: var(--type-h3-weight); letter-spacing: var(--type-h3-tracking); }
.t-title { font-size: var(--type-title-size); line-height: var(--type-title-leading); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); }
.t-lead, .t-body, .t-small, .t-label, .t-ui { font-family: var(--font-body); margin: 0; }
.t-lead { font-size: var(--type-lead-size); line-height: var(--type-lead-leading); font-weight: var(--weight-regular); letter-spacing: var(--type-lead-tracking); }
.t-body { font-size: var(--type-body-size); line-height: var(--type-body-leading); font-weight: var(--weight-regular); letter-spacing: var(--type-body-tracking); }
.t-lead, .t-body { max-width: var(--measure); text-wrap: pretty; }
.t-small { font-size: var(--type-small-size); line-height: var(--type-small-leading); font-weight: var(--weight-regular); letter-spacing: var(--type-small-tracking); }
.t-label { font-size: var(--type-label-size); line-height: var(--type-label-leading); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); text-transform: uppercase; }
.t-ui { font-size: var(--type-ui-size); line-height: var(--type-ui-leading); font-weight: var(--weight-regular); letter-spacing: var(--type-ui-tracking); }

/* ---------- Icons ---------- */
.icon { width: var(--icon-size-md); height: var(--icon-size-md); fill: currentColor; flex: none; display: inline-block; vertical-align: middle; }
.icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.icon-muted { color: var(--color-icon); }

/* ---------- Links ----------
   Plain navy text, no underline. Hover/focus: yellow fill (3px horizontal
   padding) that fades in over duration-fast. Focus also gets a 2px navy
   outline, 3px offset. The signature hover: header name, nav, tile titles,
   the footer. */
.link {
  color: var(--color-text);
  text-decoration: none;
  padding: 0 3px; margin: 0 -3px; border-radius: 2px;
  background-color: transparent;
  transition: background-color var(--duration-fast) var(--ease-out);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.link:focus-visible { background-color: var(--color-highlight); outline: 2px solid var(--color-focus); outline-offset: 3px; }
.link-cta { font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap: 6px; }
.link-cta .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.link-cta .arrow { transition: transform var(--duration-fast) var(--ease-out); }
.on-accent .link { color: var(--color-on-accent); }
.on-accent .link:focus-visible { background-color: var(--color-highlight); color: var(--color-on-highlight); outline-color: var(--color-highlight); }
@media (hover: hover) {
  .link:hover { background-color: var(--color-highlight); }
  .link-cta:hover .arrow { transform: translateX(3px); }
  .on-accent .link:hover { background-color: var(--color-highlight); color: var(--color-on-highlight); }
}
@media (prefers-reduced-motion: reduce) { .link { transition: none; } }
@media (prefers-reduced-motion: reduce) { .link-cta .arrow { transition: none; } .link-cta:hover .arrow { transform: none; } }