/* 3c418.com — values come from docs/DESIGN.md (Figma LT2p3uTLIXXDCbbNChORlX); tokens are the only source of numbers */
@layer tokens, fonts, base, layout, components;

@layer tokens {
  :root {
    color-scheme: light dark;

    --bg:    light-dark(#eaeaea, #151515);
    --bar:   light-dark(#e1e1e1, #1e1e1e);
    --fg:    light-dark(#090909, #f6f6f6);
    --fg-2:  light-dark(#424242, #bdbdbd);
    --muted: light-dark(#646464, #858585);
    --line:  light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 8%));

    --font-s: "GT Standard S", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-m: "GT Standard M", system-ui, -apple-system, "Segoe UI", sans-serif;

    --text-xs:   12px;
    --text-body: 14px;
    --text-h3:   17px;
    --text-h2:   32px;
    --text-h1:   80px;

    --leading-tight: 1.16;
    --leading-body:  24px;

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-6:  24px;
    --space-12: 48px;
    --space-15: 60px;
    --space-30: 120px;

    --bar-h:     32px;
    --row-h:     32px;
    --col-left:  280px;
    --gutter:    280px;
    --content-w: 880px;
    --card-w:    320px;
    --glyph:     8px;
    --line-w:    1px;
    --arrow:     12px;
    --arrow-w:   0.75px;
    --target:    24px;
  }

  html[data-theme="dark"]  { color-scheme: dark; }
  html[data-theme="light"] { color-scheme: light; }

  @media (max-width: 1200px) {
    :root { --gutter: var(--space-6); }
  }
}

@layer fonts {
  /* Retail GT Standard: add url("fonts/…woff2") sources here once licensed. Trial files are never shipped (EULA). */
  @font-face { font-family: "GT Standard S"; font-weight: 300; src: local("GT Standard Trial S Lt"),   local("GTStandardTrial-SLt"); }
  @font-face { font-family: "GT Standard S"; font-weight: 500; src: local("GT Standard Trial S Md"),   local("GTStandardTrial-SMd"); }
  @font-face { font-family: "GT Standard S"; font-weight: 600; src: local("GT Standard Trial S Smbd"), local("GTStandardTrial-SSmbd"); }
  @font-face { font-family: "GT Standard M"; font-weight: 300; src: local("GT Standard Trial M Lt"),   local("GTStandardTrial-MLt"); }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-m);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    -webkit-text-size-adjust: 100%;
  }

  body { margin: 0; min-height: 100dvh; }

  h1, h2, h3, p, dl { margin: 0; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

  /* Every text node in the mockup is trimmed to cap height (leadingTrim: CAP_HEIGHT) */
  h1, h2, h3, p, a, button, dt, dd { text-box: trim-both cap alphabetic; }

  :focus-visible { outline: var(--line-w) solid var(--fg); outline-offset: var(--space-1); }
}

@layer layout {
  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .bar {
    display: grid;
    grid-template-columns: var(--col-left) 1fr;
    height: calc(var(--bar-h) + var(--line-w));
    background: var(--bar);
    font-family: var(--font-s);
    font-size: var(--text-xs);
    font-weight: 300;
    line-height: var(--leading-tight);
  }
  .bar-top    { border-bottom: var(--line-w) solid var(--line); }
  .bar-bottom { border-top: var(--line-w) solid var(--line); }

  .cell {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-3);
    min-width: 0;
  }
  .cell-right { justify-content: space-between; }
  .cell-right > nav, .cell-right > div { display: flex; gap: var(--space-6); }

  main {
    padding: var(--space-30) var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
  }

  h1 {
    font-family: var(--font-s);
    font-size: var(--text-h1);
    font-weight: 300;
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
  }
}

@layer components {
  .wordmark { font-weight: 600; }

  .bar-top nav a { position: relative; }
  .bar-top nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + var(--space-1));
    height: var(--line-w);
    background: var(--fg);
  }

  .copyright { color: var(--muted); }

  /* Theme toggle: 8×8 square — outline on dark, filled on light; 24×24 hit area around it */
  .theme-toggle {
    width: var(--target);
    height: var(--target);
    margin-right: calc((var(--target) - var(--glyph)) / -2);
    display: grid;
    place-items: center;
    text-box: normal;
  }
  .theme-toggle::before {
    content: "";
    width: var(--glyph);
    height: var(--glyph);
    border: var(--line-w) solid var(--fg);
    background: light-dark(var(--fg), transparent);
  }

  /* Bordered panel (ABOUT, policies) */
  .panel {
    max-width: var(--content-w);
    border: var(--line-w) solid var(--line);
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }
  .group { display: flex; flex-direction: column; gap: var(--space-6); }
  .group h2 { font-family: var(--font-s); font-size: var(--text-h2); font-weight: 500; line-height: var(--leading-tight); }
  .group h3, .group .sub { font-family: var(--font-s); font-size: var(--text-h3); font-weight: 500; line-height: var(--leading-tight); }
  .group p { font-weight: 300; }
  .group .secondary { color: var(--fg-2); }
  .group .emphasis { color: var(--fg); }
  .group p a { text-decoration: underline; text-underline-offset: var(--space-1); }

  /* Product cards */
  .cards { display: flex; flex-wrap: wrap; gap: var(--space-15); }
  .card {
    width: var(--card-w);
    border: var(--line-w) solid var(--line);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .card h2 { font-family: var(--font-s); font-size: var(--text-h3); font-weight: 500; line-height: var(--leading-tight); }
  .card .description { color: var(--fg-2); font-weight: 300; }
  .card .more {
    display: block;
    font-size: var(--text-xs);
    font-weight: 300;
    line-height: var(--leading-tight);
  }
  /* 12×12 glyph box drawn around an 8×8 layout box; bottom edge of the 8×8 sits on the baseline, 8px after the text */
  .card .more svg {
    display: inline-block;
    vertical-align: baseline;
    width: var(--arrow);
    height: var(--arrow);
    --overhang: calc((var(--arrow) - var(--glyph)) / -2);
    margin: var(--overhang) var(--overhang) var(--overhang) calc(var(--space-2) + var(--overhang));
    stroke: currentColor;
    stroke-width: var(--arrow-w);
    fill: none;
  }
  .spec {
    margin: 0 calc(var(--space-6) * -1);
    font-family: var(--font-s);
    font-size: var(--text-xs);
    font-weight: 300;
    line-height: var(--leading-tight);
  }
  /* Row pitch is exactly 32 (mockup rounds the 12px cap height to 8; the font gives 8.45) */
  .spec > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: calc(var(--row-h) + var(--line-w));
    padding: var(--space-3) var(--space-6);
    border-bottom: var(--line-w) solid var(--line);
    margin-bottom: calc(var(--line-w) * -1);
  }
  .spec dt { color: var(--muted); }
  .spec dd { margin: 0; font-family: var(--font-m); color: var(--fg-2); }
  .card .links {
    display: flex;
    gap: var(--space-6);
    font-family: var(--font-s);
    font-size: var(--text-xs);
    font-weight: 300;
    line-height: var(--leading-tight);
  }
  a[aria-disabled="true"] { cursor: default; }

  /* Contact rows */
  .rows { display: flex; flex-direction: column; gap: var(--space-6); }
  .row {
    width: var(--card-w);
    border: var(--line-w) solid var(--line);
    padding: var(--space-6);
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    font-size: var(--text-xs);
    font-weight: 300;
    line-height: var(--leading-tight);
  }
  .row dt { font-family: var(--font-s); color: var(--muted); }
  .row dd { margin: 0; }

  @media (max-width: 1200px) {
    .bar { grid-template-columns: auto 1fr; }
    .card, .row { width: min(var(--card-w), 100%); }
  }
}