/* Pinova portal design system: the base. Native CSS only - custom
   properties, cascade layers and nesting; no build step.

   Layer order is the whole cascade contract: a theme may restyle a
   component without fighting its specificity, and a utility always wins. */
@layer reset, tokens, components, themes, utilities;

/* ---------------------------------------------------------------- fonts */

@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("../fonts/Inter.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-display: swap; src: url("../fonts/JetBrainsMono.woff2") format("woff2"); }

/* ---------------------------------------------------------------- reset */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; text-wrap: balance; overflow-wrap: break-word; }
  p { text-wrap: pretty; overflow-wrap: break-word; }
  ul, ol { padding: 0; list-style: none; }
  table { border-collapse: collapse; border-spacing: 0; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  dialog { padding: 0; border: 0; color: inherit; background: none; max-width: none; max-height: none; }
  summary { list-style: none; cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  [hidden] { display: none !important; }

  /* Icons are the portal's inline Remix SVGs (aria-hidden). A component
     sizes them through --icon-size instead of a width per context. */
  svg:where([aria-hidden="true"]) { width: var(--icon-size, 1.125rem); height: var(--icon-size, 1.125rem); flex-shrink: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
}

/* --------------------------------------------------------------- tokens */

/* Scales every theme shares, and a neutral default for every semantic
   token a component reads. A theme (themes/*.css) overrides the semantic
   tokens; components never name a raw color or size. */
@layer tokens {
  :root {
    /* The portal is light only. */
    color-scheme: light;

    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.875rem;
    --text-base: 0.9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.375rem;
    --text-5xl: 3rem;

    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading: 1.5;
    --leading-relaxed: 1.65;

    --ease: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur: 180ms;
    --dur-slow: 280ms;

    --z-sticky: 10;
    --z-dropdown: 30;
    --z-overlay: 40;
    --z-toast: 50;

    --measure: 68ch;

    /* type */
    --font-sans: ui-sans-serif, system-ui, sans-serif;
    --font-display: var(--font-sans);
    --font-mono: ui-monospace, monospace;
    --font-figures: var(--font-sans);
    --text-body: var(--text-md);
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-strong: 600;
    --weight-heading: 600;
    --tracking-heading: -0.015em;
    --tracking-display: -0.025em;
    --tracking-caps: 0.06em;

    /* surfaces */
    --canvas: oklch(0.985 0 0);
    --surface: oklch(1 0 0);
    --surface-raised: var(--surface);
    --surface-muted: oklch(0.97 0 0);
    --surface-hover: oklch(0.955 0 0);
    --surface-inset: var(--surface);
    --backdrop: oklch(0.2 0 0 / 0.4);

    /* text */
    --fg: oklch(0.2 0 0);
    --fg-muted: oklch(0.48 0 0);
    --fg-subtle: oklch(0.62 0 0);

    /* lines */
    --border: oklch(0.915 0 0);
    --border-strong: oklch(0.84 0 0);
    --border-subtle: oklch(0.945 0 0);

    /* the primary action, and its tinted form for selected states */
    --accent: oklch(0.2 0 0);
    --accent-hover: oklch(0.32 0 0);
    --on-accent: oklch(1 0 0);
    --accent-soft: oklch(0.95 0 0);
    --on-accent-soft: var(--fg);
    --link: oklch(0.5 0.2 260);

    /* status: solid, soft background, text on the soft background */
    --success: oklch(0.58 0.14 155);
    --success-soft: oklch(0.96 0.035 155);
    --on-success-soft: oklch(0.42 0.1 155);
    --warning: oklch(0.72 0.15 70);
    --warning-soft: oklch(0.965 0.05 88);
    --on-warning-soft: oklch(0.47 0.11 60);
    --danger: oklch(0.56 0.21 27);
    --danger-hover: oklch(0.5 0.2 27);
    --on-danger: oklch(1 0 0);
    --danger-soft: oklch(0.965 0.025 25);
    --on-danger-soft: oklch(0.47 0.17 27);
    --info: oklch(0.56 0.15 250);
    --info-soft: oklch(0.96 0.025 245);
    --on-info-soft: oklch(0.44 0.13 255);

    /* focus */
    --focus: var(--link);
    --focus-width: 2px;
    --focus-offset: 2px;

    /* shape and depth */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 999px;
    --shadow-xs: 0 1px 1px oklch(0 0 0 / 0.04);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
    --shadow-md: 0 6px 16px -4px oklch(0 0 0 / 0.12), 0 2px 4px -2px oklch(0 0 0 / 0.06);
    --shadow-lg: 0 24px 48px -12px oklch(0 0 0 / 0.25);

    /* controls */
    --control-h-sm: 1.75rem;
    --control-h: 2.125rem;
    --control-h-lg: 2.625rem;
    --control-px: 0.75rem;
    --control-radius: var(--radius-md);
    --control-border: var(--border-strong);
    --control-shadow: var(--shadow-xs);
    --control-weight: var(--weight-medium);

    /* containers */
    --card-radius: var(--radius-lg);
    --card-border: var(--border);
    --card-shadow: none;
    --card-pad: var(--space-5);
    --badge-radius: var(--radius-sm);

    /* tables */
    --cell-py: 0.5rem;
    --cell-px: 0.75rem;
    --th-bg: transparent;
    --th-fg: var(--fg-muted);
    --th-size: var(--text-xs);
    --th-weight: var(--weight-medium);
    --th-transform: none;
    --th-tracking: normal;
    --row-border: var(--border-subtle);
    --row-hover: var(--surface-muted);
    --total-rule: 1px solid var(--border-strong);

    /* navigation */
    --nav-active-bg: var(--accent-soft);
    --nav-active-fg: var(--fg);
    --sidebar-bg: var(--canvas);
  }
}