/* type-system.css: the shared TASK:RE type roles (semantic elements + .t-* utilities).
   Values come from taskre-tokens.css. Family: Geist (self-hosted, 400-600) + Geist Mono.
   Light is the default; dark applies via <html data-theme="dark">. */
@layer reset, tokens, base, layout, components, utilities, overrides;

@import url("taskre-tokens.css?v=1") layer(tokens);

@layer tokens {
  /* Role names for the type system. Values resolve to taskre-tokens.css, the
     single source; this file adds no colours or sizes of its own. */
  :root {
    --font-sans: var(--taskre-font-sans);
    --font-mono: var(--taskre-font-mono);

    --font-size-caption: var(--taskre-text-xs);
    --font-size-small:   var(--taskre-text-md);
    --font-size-body:    var(--taskre-text-base);
    --font-size-lead:    var(--taskre-text-lg);
    --font-size-sub:     var(--taskre-text-xl);
    --font-size-heading: var(--taskre-text-2xl);
    --font-size-title:   var(--taskre-text-title);
    --font-size-display: var(--taskre-text-display);

    --weight-regular:  var(--taskre-weight-regular);
    --weight-medium:   var(--taskre-weight-medium);
    --weight-semibold: var(--taskre-weight-semibold);

    --leading-display: var(--taskre-leading-display);
    --leading-title: 1.1;
    --leading-heading: var(--taskre-leading-tight);
    --leading-sub: 1.3;
    --leading-body: var(--taskre-leading-body);
    --leading-small: var(--taskre-leading-body);
    --leading-caption: 1.45;
    --leading-label: 1.3;

    --tracking-display: var(--taskre-tracking-display);
    --tracking-title: var(--taskre-tracking-title);
    --tracking-heading: var(--taskre-tracking-heading);
    --tracking-caps: var(--taskre-tracking-caps);

    --measure: var(--taskre-measure);
    --space-1: var(--taskre-space-1); --space-2: var(--taskre-space-2); --space-3: var(--taskre-space-3); --space-4: var(--taskre-space-4);
    --space-5: var(--taskre-space-6); --space-6: var(--taskre-space-8); --space-7: var(--taskre-space-12); --space-8: var(--taskre-space-16);
    --space-9: var(--taskre-space-24); --space-10: var(--taskre-space-32);
    --space-paragraph: 1em;
    --space-heading-above: 2.5em;
    --space-heading-below: 0.5em;
    --space-card: var(--space-5);
    --space-section-app: var(--space-7);
    --space-section: clamp(2.5rem, 8vw, 6rem);
    --gutter: clamp(1rem, 3.5vw, 2.5rem);

    --ink: var(--taskre-text);
    --ink-muted: var(--taskre-text-muted);
    --ink-subtle: var(--taskre-text-faint);
    --ink-inverse: var(--taskre-text-inverse);

    --color-text: var(--ink);
    --color-text-muted: var(--ink-muted);
    --color-text-subtle: var(--ink-subtle);

    --brand-hue: 160deg;
    --color-bg: var(--taskre-bg);
    --color-surface: var(--taskre-surface);
    --color-accent: var(--taskre-accent);
    --color-accent-hover: var(--taskre-accent-hover);
    --color-on-accent: var(--taskre-text-inverse);
    --color-link: var(--taskre-accent-text);
    --color-focus: var(--taskre-focus-ring);
    --color-success-text: var(--taskre-accent-strong);
    --color-danger-text: var(--taskre-danger-strong);
    --color-warning-text: var(--taskre-warning-strong);
  }
}

@layer base {
  html {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-synthesis: none;              /* no faux bold/italic */
    font-optical-sizing: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  body { font: var(--weight-regular) var(--font-size-body) / var(--leading-body) var(--font-sans); margin: 0; }
  :lang(ja), :lang(zh), :lang(ko) { line-height: 1.7; font-style: normal; }

  /* Roles via semantic elements */
  h1 { font-size: var(--font-size-title);   font-weight: var(--weight-semibold); line-height: var(--leading-title);   letter-spacing: var(--tracking-title);   text-wrap: balance; }
  h2 { font-size: var(--font-size-heading); font-weight: var(--weight-medium);   line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; }
  h3 { font-size: var(--font-size-sub);     font-weight: var(--weight-medium);   line-height: var(--leading-sub);     text-wrap: balance; }
  h4, h5, h6 { font-size: var(--font-size-body); font-weight: var(--weight-medium); line-height: var(--leading-body); }
  p { text-wrap: pretty; }
  small { font-size: var(--font-size-caption); line-height: var(--leading-caption); color: var(--color-text); }
  strong, b { font-weight: var(--taskre-weight-medium, 500); }          /* emphasis is a half-step, never 700 */
  em, i { font-style: italic; }
  a { text-underline-offset: 0.15em; }
  a:not([class]) { text-decoration: underline; }   /* content links are always underlined; component links carry a class */
  code, kbd, pre { font-family: var(--font-mono); font-size: max(0.875em, 0.875rem); }
  pre { overflow-x: auto; max-inline-size: 100%; }
  td, th, [data-numeric] { font-variant-numeric: tabular-nums; }
  input, select, textarea, button { font: inherit; }
  input, select, textarea { font-size: max(1rem, 100%); }  /* ≥16 px: no iOS zoom */
  ::placeholder { color: var(--color-text-muted); opacity: 1; }
  :focus-visible { outline: var(--taskre-focus-width) solid var(--taskre-focus-ring); outline-offset: var(--taskre-focus-offset); }
  @media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } }
}

@layer utilities {
  .t-display    { font-size: var(--font-size-display); font-weight: var(--weight-semibold); line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
  .t-title      { font-size: var(--font-size-title);   font-weight: var(--weight-semibold); line-height: var(--leading-title);   letter-spacing: var(--tracking-title); }
  .t-heading    { font-size: var(--font-size-heading); font-weight: var(--weight-medium);   line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
  .t-subheading { font-size: var(--font-size-sub);     font-weight: var(--weight-medium);   line-height: var(--leading-sub); }
  .t-lead       { font-size: var(--font-size-lead);    font-weight: var(--weight-regular);  line-height: var(--leading-body); }
  .t-body       { font-size: var(--font-size-body);    font-weight: var(--weight-regular);  line-height: var(--leading-body); }
  .t-body-sm    { font-size: var(--font-size-small);   font-weight: var(--weight-regular);  line-height: var(--leading-small);   color: var(--color-text); }
  .t-label      { font-size: var(--font-size-small);   font-weight: var(--weight-medium);   line-height: var(--leading-label); }
  .t-overline   { font-size: var(--font-size-caption); font-weight: var(--weight-medium);   line-height: var(--leading-label);   letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text); }
  .t-caption    { font-size: var(--font-size-caption); font-weight: var(--weight-regular);  line-height: var(--leading-caption); color: var(--color-text); }
  .t-code       { font-family: var(--font-mono); font-size: max(0.875em, 0.875rem); }
  .t-muted      { color: var(--color-text-muted); }   /* ≥16 px text only */
  .t-subtle     { color: var(--color-text-subtle); }  /* ≥16 px text only */
  .t-numeric    { font-variant-numeric: tabular-nums; }

  .reading { font-size: var(--font-size-lead); }
  .reading p, .reading li { max-inline-size: var(--measure); }
  .reading h2 + p, .reading h3 + p { margin-block-start: 0; }

  .widget { container-type: inline-size; color: var(--color-text); background: var(--color-surface); padding: var(--space-card); }
  @container (max-width: 24rem) { .widget { padding: var(--space-4); } }
}