/* Lokta base layer.
   Design constants that are not colour/size tokens (easing, durations, type
   styles, interaction state), plus the brand customisation layer and
   forced-colors support. Load order: tokens CSS, then this, then components.

   Depends on the semantic token layer from @lokta/tokens (e.g. --surface-inset,
   --rule-2). Load a theme file (lokta.paper.css) or the combined lokta.css first. */

:root {
  /* Motion. Paper does not bounce. */
  --ease-paper: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Type styles. Each size pairs a line-height, weight, and tracking. */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;
  --wt-regular: 400;
  --wt-medium: 500;
  --wt-semibold: 600;
  --wt-bold: 700;
  --wt-black: 800;
  --track-tight: -0.03em;
  --track-snug: -0.01em;
  --track-label: 0.12em;

  /* Interaction state. Resolves per theme via the surface tokens. */
  --state-hover: var(--surface-inset);
  --state-selected: var(--surface-sunken);
  --state-disabled-opacity: 0.45;

  /* Reference component classes name the focus width --focus-ring-width; the
     token pipeline emits --focus-width. Alias so both resolve. */
  --focus-ring-width: var(--focus-width, var(--rule-2));

  /* Brand customisation layer. Apps may override these. Everything else
     (type scale, 8px grid, AA rules, hard-edged character) is locked.
     - accent pigment: --lk-accent
     - control radius: --lk-radius (0 to 3px)
     - density: [data-density="compact"]
     - grain: [data-grain="off"]
     - stock: [data-theme="…"] */
  --lk-accent: var(--accent-feature-ground, var(--pigment-marigold));
  --lk-radius: 0px;
  --lk-density-step: 0px;

  /* The hatch end-mark as an SVG mask. Vector strokes anti-alias per zoom level,
     so the stripes stay even where a repeating-linear-gradient goes ragged. The
     stripe colour comes from the element's background; the mask is shape only. */
  --lk-hatch-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0M-1.5 1.5L1.5 -1.5M4.5 7.5L7.5 4.5' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");

  /* Heritage pigments (Accent dial options). -light variants carry accent text on
     the dark stocks; gilt is a flat fill only, not text. */
  --pigment-madder: #8E3B30;
  --pigment-walnut: #4E3B29;
  --pigment-turmeric: #7A5A12;
  --pigment-lac: #9B2D4D;
  --pigment-malachite: #3F6B4E;
  --pigment-conch: #F7F4E9;
  --pigment-afsani-gilt: #B08D3C;
  --pigment-madder-light: #DE9684;
  --pigment-walnut-light: #C9A982;
  --pigment-turmeric-light: #E0B452;
  --pigment-lac-light: #D98098;
  --pigment-malachite-light: #7FB08C;

  /* VOICE dial. Per-role stacks: Latin face first, then script fallbacks. :lang()
     below picks the script by content language, never a user dial. */
  --font-family-display: "Archivo", "Mukta", "Anek Bangla", "Noto Sans JP", system-ui, sans-serif;
  --font-family-mono: "Spline Sans Mono", ui-monospace, monospace;
  --font-family-serif: "Source Serif 4", "Martel", "Noto Serif Bengali", Georgia, serif;
  --font-family-cjk: "Noto Sans JP", sans-serif;
  --font-family-bengali: "Anek Bangla", "Noto Sans Bengali", sans-serif;
  --font-family-devanagari: "Mukta", "Noto Sans Devanagari", sans-serif;
  --voice-weight-display: 800;
  --voice-tracking-display: -0.04em;
}

/* Script selection is automatic by content language, not a dial. */
:lang(ne), :lang(hi), :lang(sa), :lang(mr) {
  --font-family-display: "Mukta", "Archivo", sans-serif;
  --font-family-serif: "Martel", "Source Serif 4", serif;
}
:lang(bn) {
  --font-family-display: "Anek Bangla", "Archivo", sans-serif;
  --font-family-serif: "Noto Serif Bengali", "Source Serif 4", serif;
}

/* Syntax theme: 10 token roles, AA on the code background in light and dark.
   Consumed by lokta-prism.css, lokta-hljs.css, and the .tmTheme. Gated by
   validate/code-aa.mjs. */
:root {
  --code-bg: #FAF8EA;
  --code-comment: #615A4C; --code-keyword: #8E2C49; --code-string: #4F6B50;
  --code-number: #8A5A12; --code-function: #1F5C92; --code-type: #5F4080;
  --code-variable: #2A2620; --code-operator: #B23320; --code-punctuation: #5C564B;
  --code-keyword2: #2F6F6D;
  /* diff lines, line gutter, and the active-line highlight. The diff text roles
     are AA on the wash composite (add-bg/del-bg over code-bg), not just bare bg. */
  --code-add: #43603C; --code-del: #B23320;
  --code-add-bg: rgba(79, 107, 80, 0.16); --code-del-bg: rgba(178, 51, 32, 0.13);
  --code-gutter: #5C564B; --code-line-hl: rgba(31, 28, 19, 0.05);
}
[data-theme="ink"], [data-theme="indigo"], [data-theme="highland"],
[data-theme="pine"], [data-theme="mulberry"], [data-theme="slate"],
[data-theme="steel"], [data-theme="onyx"] {
  --code-bg: #16140E;
  --code-comment: #9A9384; --code-keyword: #D67A95; --code-string: #8FB088;
  --code-number: #D9A642; --code-function: #6FA8D8; --code-type: #A98FC9;
  --code-variable: #E2E1D6; --code-operator: #E2654F; --code-punctuation: #ADB2AE;
  --code-keyword2: #5FB0AD;
  --code-add: #8FB088; --code-del: #E2654F;
  --code-add-bg: rgba(143, 176, 136, 0.16); --code-del-bg: rgba(226, 101, 79, 0.15);
  --code-gutter: #ADB2AE; --code-line-hl: rgba(250, 248, 234, 0.06);
}

/* Density. Compact tightens control heights and gutters by one step. */
[data-density="compact"] {
  --lk-density-step: 4px;
}

/* Grain dial: off | subtle (default) | fibrous. Fibrous swaps the dots for lokta fibre. */
[data-grain="off"] .lk-sheet::before {
  display: none;
}
[data-grain="fibrous"] .lk-sheet::before {
  background-image:
    repeating-linear-gradient(91deg, rgba(22, 20, 14, 0.05) 0, rgba(22, 20, 14, 0.05) 0.6px, transparent 0.6px, transparent 2.5px),
    repeating-linear-gradient(88.5deg, rgba(22, 20, 14, 0.035) 0, rgba(22, 20, 14, 0.035) 0.5px, transparent 0.5px, transparent 6px);
  background-size: auto;
  opacity: 0.9;
}

/* Forced colors (Windows High Contrast). Keep keylines and focus visible by
   mapping to system colours; let the OS own the palette. */
@media (forced-colors: active) {
  .lk-btn,
  .lk-input,
  .lk-tag,
  .lk-card,
  .lk-table th,
  .lk-table td {
    border-color: ButtonText;
  }
  .lk-btn-primary,
  .lk-tag-filled {
    background: ButtonText;
    color: ButtonFace;
    border-color: ButtonText;
  }
  .lk-btn:focus-visible,
  .lk-input:focus-visible,
  .lk-tag:focus-visible,
  .lk-focus:focus-visible,
  a:focus-visible {
    outline-color: Highlight;
  }
  /* Status glyphs carry meaning when hue is stripped; keep them. */
  .lk-status::before {
    forced-color-adjust: none;
  }
}