/* [1] tokens.css */
@layer platform.base {
  :root {
    /* Backgrounds */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-border-tertiary: #d8d8e1;
    --color-bg-muted: #f3f4f6;

    /* Surface & border */
    --color-surface: #ffffff;
    --color-border-primary: #e5e7eb;

    /* Text */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #6b7280;
    --color-text-inverse: #ffffff;

    /* Brand & accent */
    --color-primary: #0f172a;
    --color-accent: #6366f1;
    --color-muted: #9ca3af;
    --color-ink: #e5e7eb;
    --color-primary-inverse: #ffffff;

    /* Semantic */
    --color-success: #22c55e;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #0ea5e9;

    /* Spacing (rem-based, 1rem = 16px) */
    --space-none: 0;
    --space-base: 0.25rem; /* 4px  */
    --space-2xs: calc(var(--space-base) * 1); /* 4px  */
    --space-xs: calc(var(--space-base) * 2); /* 8px  */
    --space-s: calc(var(--space-base) * 3); /* 12px */
    --space-m: calc(var(--space-base) * 4); /* 16px */
    --space-l: calc(var(--space-base) * 6); /* 24px */
    --space-xl: calc(var(--space-base) * 8); /* 32px */
    --space-2xl: calc(var(--space-base) * 12); /* 48px */
    --space-3xl: calc(var(--space-base) * 16); /* 64px */

    --stack-gap: var(--space-l);

    /* Border radius */
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-round: 9999px;

    /* Elevation */
    --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-m: 0 2px 6px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-l: 0 8px 24px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.06);
    --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-accent), white 60%);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-none: none;

    /* Fonts */
    --font-sans:
      ui-sans-serif, system-ui, Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
      sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Sizes */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-s: 0.875rem; /* 14px */
    --font-size-m: 1rem; /* 16px */
    --font-size-l: 1.25rem; /* 20px */
    --font-size-xl: 1.5rem; /* 24px */

    --font-size-base: var(--font-size-s);

    /* Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-xs: 1.25;
    --line-height-s: 1.5;
    --line-height-m: 1.75;
    --line-height-l: 2;
    --line-height-xl: 2.25;
    --line-height-2xl: 2.5;

    --line-height-base: var(--line-height-xs);

    /* Letter spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;

    /* Opacity */
    --opacity-disabled: 0.5;
    --opacity-hover: 0.85;

    /* Transitions */
    --transition-fast: 120ms;
    --transition-base: 200ms;
    --transition-slow: 320ms;
    --transition-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* Dimensions */
    --sidebar-w: 56px;
  }

  :root[data-theme="dark"] {
    /* Backgrounds */
    --color-bg-primary: #0f172a; /* slate-900 */
    --color-bg-secondary: #111827; /* near slate-900/800 for subtle steps */
    --color-bg-muted: #1f2937; /* slate-800 */

    /* Surface & border */
    --color-surface: #111827; /* main card/panel surface */
    --color-border-primary: #334155; /* slate-700 – visible but soft */

    /* Text */
    --color-text-primary: #f8fafc; /* near-white for strong contrast */
    --color-text-secondary: #e2e8f0; /* slate-200 */
    --color-text-muted: #94a3b8; /* slate-400 */

    /* Brand & accent (slightly lighter/brighter for dark bg) */
    --color-primary: #60a5fa; /* lighter blue */
    --color-accent: #818cf8; /* lighter indigo */

    /* Semantic (lift lightness a bit for readability on dark) */
    --color-success: #4ade80; /* green-400 */
    --color-danger: #f87171; /* red-400 */
    --color-warning: #fbbf24; /* amber-400 */
    --color-info: #38bdf8; /* sky-400 */

    /* Elevation (dark mode benefits from subtle light glows) */
    --shadow-s: 0 1px 2px rgba(255, 255, 255, 0.04), 0 1px 3px rgba(255, 255, 255, 0.06);
    --shadow-m: 0 2px 6px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(255, 255, 255, 0.08);
    --shadow-l: 0 8px 24px rgba(255, 255, 255, 0.06), 0 16px 48px rgba(255, 255, 255, 0.05);

    /* Focus ring: mix accent with black for dark context */
    --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-accent), black 60%);

    /* Inset: lower opacity so pressed states don’t look dirty */
    --shadow-inset: inset 0 1px 2px rgba(255, 255, 255, 0.08);
  }
}

/* [2] base.css */
@layer platform.base {
  /* Reset browser defaults */
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    color: inherit;
    vertical-align: baseline;
  }
  /* Defaults */
  * {
    box-sizing: border-box;
  }
  html,
  body {
    height: 100%;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  time {
    color: #64748b;
    font-size: 12px;
  }

  /* -------- Native element defaults -------- */
  /* Document headings & text flow */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-s);
    color: var(--color-text-primary);
  }
  h1 {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  }
  h2 {
    font-size: clamp(1.25rem, 1.1rem + 1vw, 1.5rem);
  }
  h3 {
    font-size: 1.125rem;
  }
  h4 {
    font-size: 1rem;
  }
  h5 {
    font-size: 0.9375rem;
  }
  h6 {
    font-size: 0.875rem;
  }

  p {
    margin: 0 0 var(--space-m);
  }

  small {
    font-size: small;
  }
  strong {
    font-weight: var(--font-weight-semibold);
  }
  em {
    font-style: italic;
  }

  /* Links */
  a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  a:hover {
    opacity: var(--opacity-hover);
  }
  a:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--color-accent), white 40%);
    outline-offset: 2px;
  }

  /* Lists */
  ul,
  ol {
    margin: 0 0 var(--space-m);
    padding-left: var(--space-l);
  }
  li {
    margin: 0 0 var(--space-xs);
  }

  /* Horizontal rule */
  hr {
    border: 0;
    height: 1px;
    background: var(--color-border-primary);
    margin: var(--space-m) 0;
  }

  /* Quotes */
  blockquote {
    margin: 0 0 var(--space-m);
    padding: var(--space-s) var(--space-m);
    border-left: 3px solid var(--color-accent);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
  }
  cite {
    font-style: normal;
    color: var(--color-text-muted);
  }

  /* Code & Preformatted */
  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-size: 0.95em;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-s);
    padding: 0 0.35em;
  }
  pre {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: var(--line-height-s);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    overflow: auto;
    white-space: pre;
  }
  pre code {
    background: transparent;
    border: 0;
    padding: 0;
  }

  /* Media */
  img,
  svg,
  video,
  canvas,
  audio,
  iframe {
    display: block;
    max-width: 100%;
  }
  img,
  video,
  canvas {
    height: auto;
  }
  figure {
    margin: 0 0 var(--space-m);
  }
  figcaption {
    color: var(--color-text-muted);
    font-size: var(--font-size-s);
    margin-top: var(--space-xs);
  }

  /* Tables (generic; can be enhanced by component classes) */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-m);
  }
  th,
  td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-primary);
    text-align: left;
  }
  th {
    color: var(--color-text-secondary);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* Forms (native baseline; component classes may override) */
  label {
    font-size: var(--font-size-s);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    display: inline-block;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-s);
  }
  input,
  textarea,
  select {
    font: inherit;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-m);
    padding: 10px 12px;
    outline: none;
    box-shadow: var(--shadow-none);
    width: 100%;
    font-size: var(--font-size-s);
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--color-text-muted);
  }
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--color-accent), white 40%);
    outline-offset: 2px;
  }
  /* Reset and base appearance */
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border-primary, #d1d5db);
    border-radius: 4px;
    background-color: var(--color-surface, #fff);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: all 0.15s ease-in-out;
    padding: 8px;
  }

  /* Checked state */
  input[type="checkbox"]:checked {
    background-color: var(--color-primary, #3b82f6);
    border-color: var(--color-primary, #3b82f6);
  }

  /* Checkmark */
  input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /* Hover state */
  input[type="checkbox"]:hover {
    border-color: var(--color-primary, #3b82f6);
  }

  /* Focus ring (keyboard accessibility) */
  input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
  }

  /* Disabled state */
  input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  button {
    font-size: var(--font-size-s);
    cursor: pointer;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-m);
    padding: 8px 12px;
    box-shadow: var(--shadow-s);
  }
  button:disabled,
  [aria-disabled="true"] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
  }

  /* Form elements */
  form {
    --no-op: 0;
  }
  legend {
    padding: 0 var(--space-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
  }
  fieldset {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    margin: 0 0 var(--space-m);
    display: grid;
    gap: var(--space-s); /* vertical rhythm */
    margin: 0; /* avoid double spacing with card padding */
  }

  /* Details/summary */
  details {
    /* border: 1px solid var(--color-border-primary); */
    border-radius: var(--radius-m);
    padding: var(--space-xs);
    background: var(--color-bg-primary);
  }
  details + details {
    margin-top: var(--space-s);
  }
  summary {
    cursor: pointer;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }

  /* Typographic helpers */
  mark {
    background: color-mix(in oklab, var(--color-warning), white 80%);
    color: inherit;
    border-radius: 2px;
    padding: 0 0.2em;
  }
  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }
  sup,
  sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sup {
    top: -0.5em;
  }
  sub {
    bottom: -0.25em;
  }

  /* Global focus fallback for interactive elements */
  :where(a, button, input, textarea, select):focus:not(:focus-visible) {
    outline: none;
  }
  :where(a, button, input, textarea, select):focus-visible {
    outline: 2px solid color-mix(in oklab, var(--color-accent), white 40%);
    outline-offset: 2px;
  }

  /* HTML5 structural elements */
  :where(main, nav, section, article, aside, header, footer) {
    display: block;
  }

  /* Definition lists */
  dl {
    margin: 0 0 var(--space-m);
  }
  dt {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }
  dd {
    margin: 0 0 var(--space-s) var(--space-m);
    color: var(--color-text-muted);
  }

  /* Table caption */
  caption {
    caption-side: top;
    text-align: left;
    color: var(--color-text-muted);
    font-size: var(--font-size-s);
    padding: 8px 0;
  }

  /* Address */
  address {
    font-style: normal;
    color: var(--color-text-secondary);
  }

  /* Text selection */
  ::selection {
    background: color-mix(in oklab, var(--color-accent), white 80%);
    color: var(--color-text-primary);
  }

  /* Forms: extras and controls */
  textarea {
    resize: vertical;
    font-family: var(--font-mono);
    line-height: var(--line-height-s);
  }
  input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
  }
  /* File input button */
  ::file-selector-button {
    font: inherit;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-s);
    padding: 6px 10px;
    margin-right: var(--space-s);
    cursor: pointer;
  }
  /* Accent color for native controls */
  :where(input[type="checkbox"], input[type="radio"], input[type="range"], progress, meter) {
    accent-color: var(--color-accent);
  }
  /* Disabled form fields */
  input:disabled,
  textarea:disabled,
  select:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    background: var(--color-bg-muted);
  }
  /* Autofill normalize */
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg-primary) inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  /* Dialog baseline */
  dialog {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-l);
  }
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
  }

  /* Pointer for role-based buttons */
  [role="button"] {
    cursor: pointer;
  }
}