@layer reset, tokens, utilities, components;

/* ============================================================
   TOKENS
   - Design system: colors, spacing, type, radii, shadows, sizes
   - Bridges legacy CSS variables used by the existing markup
   - Supports global (:root[data-theme]) and local (.pane[data-theme]) theming
   ============================================================ */
@layer tokens {
  /* --- Color tokens (semantic) --- */
  :root {
    /* Surfaces & text */
    --color-bg:               #f3f4f6; /* gray-100 */
    --color-surface:          #ffffff; /* white */
    --color-ink:              #1f2937; /* gray-800 */
    --color-muted:            #4b5563; /* gray-600 */
    --color-border:           #d1d5db; /* gray-300 */
    --color-border-weak:      #e5e7eb; /* gray-200 */

    /* Accent / actions */
    --color-accent:           #2563eb; /* blue-600 */
    --color-accent-strong:    #1d4ed8; /* blue-700 */
    --color-accent-contrast:  #ffffff;

    /* Functional (success / warn / danger) */
    --color-success:          #16a34a; /* green-600 */
    --color-success-bg:       #dcfce7; /* green-100 */
    --color-warn:             #ca8a04; /* amber-600 */
    --color-warn-bg:          #fef9c3; /* amber-100 */
    --color-danger:           #dc2626; /* red-600 */
    --color-danger-bg:        #fee2e2; /* red-100 */

    /* Forms */
    --color-form-bg:          #f9fafb; /* gray-50 */

    /* Scrollbar */
    --color-scrollbar:        var(--color-border);

    /* --- Typography --- */
    --font-sans:              'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

    --fs-900:                 2.5rem;
    --fs-800:                 2rem;
    --fs-700:                 1.5rem;
    --fs-600:                 1.25rem;
    --fs-500:                 1.125rem;
    --fs-400:                 1rem;
    --fs-300:                 0.875rem;
    --fs-200:                 0.75rem;

    --leading-tight:          1.2;
    --leading-normal:         1.5;

    --fw-regular:             400;
    --fw-medium:              500;
    --fw-semibold:            600;
    --fw-bold:                700;

    /* --- Spacing scale (4/8px) --- */
    --space-0:                0;
    --space-1:                0.25rem;  /* 4px */
    --space-2:                0.5rem;   /* 8px */
    --space-3:                0.75rem;  /* 12px */
    --space-4:                1rem;     /* 16px */
    --space-5:                1.25rem;  /* 20px */
    --space-6:                1.5rem;   /* 24px */
    --space-8:                2rem;     /* 32px */

    /* --- Radii & Shadows --- */
    --radius-0:               0;
    --radius-1:               0.25rem;  /* 4px */
    --radius-2:               0.5rem;   /* 8px */
    --radius-pill:            9999px;

    --shadow-1:               0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
    --shadow-2:               0 4px 16px rgba(0,0,0,0.10);

    /* --- Layout measurements --- */
    --pane-max-w:             72rem;
  }

  /* --- Dark theme tokens (global) --- */
  :root[data-theme="dark"],
  html.dark {
    --color-bg:               #111827; /* gray-900 */
    --color-surface:          #1f2937; /* gray-800 */
    --color-ink:              #f3f4f6; /* gray-100 */
    --color-muted:            #9ca3af; /* gray-400 */
    --color-border:           #4b5563; /* gray-600 */
    --color-border-weak:      #374151; /* gray-700 */

    --color-accent:           #3b82f6; /* blue-500 */
    --color-accent-strong:    #2563eb; /* blue-600 */
    --color-accent-contrast:  #0b1220;

    --color-success:          #22c55e; /* green-500 */
    --color-success-bg:       rgba(34,197,94,0.15);
    --color-warn:             #eab308; /* amber-500 */
    --color-warn-bg:          rgba(234,179,8,0.15);
    --color-danger:           #ef4444; /* red-500 */
    --color-danger-bg:        rgba(239,68,68,0.15);

    --color-form-bg:          #374151; /* gray-700 */

    --color-scrollbar:        var(--color-border);
  }

  /* --- Bridge legacy custom properties (do not rename) --- */
  :root,
  :root[data-theme="light"] {
    --bg-primary:             var(--color-bg);
    --bg-secondary:           var(--color-surface);
    --text-primary:           var(--color-ink);
    --text-secondary:         var(--color-muted);
    --border-primary:         var(--color-border);
    --border-secondary:       var(--color-border-weak);
    --action-primary:         var(--color-accent);
    --action-hover:           var(--color-accent-strong);
    --form-bg:                var(--color-form-bg);
  }

  :root[data-theme="dark"],
  html.dark {
    --bg-primary:             var(--color-bg);
    --bg-secondary:           var(--color-surface);
    --text-primary:           var(--color-ink);
    --text-secondary:         var(--color-muted);
    --border-primary:         var(--color-border);
    --border-secondary:       var(--color-border-weak);
    --action-primary:         var(--color-accent);
    --action-hover:           var(--color-accent-strong);
    --form-bg:                var(--color-form-bg);
  }

  /* --- Per-pane local theme overrides --- */
  .pane[data-theme="light"] {
    --bg-primary:             #f3f4f6;
    --bg-secondary:           #ffffff;
    --text-primary:           #1f2937;
    --text-secondary:         #4b5563;
    --border-primary:         #d1d5db;
    --border-secondary:       #e5e7eb;
    --action-primary:         #2563eb;
    --action-hover:           #1d4ed8;
    --form-bg:                #f9fafb;
  }

  .pane[data-theme="dark"] {
    --bg-primary:             #111827;
    --bg-secondary:           #1f2937;
    --text-primary:           #f3f4f6;
    --text-secondary:         #9ca3af;
    --border-primary:         #4b5563;
    --border-secondary:       #374151;
    --action-primary:         #3b82f6;
    --action-hover:           #2563eb;
    --form-bg:                #374151;
  }
}

/* ============================================================
   RESET
   - Minimal modern reset; a11y-friendly focus styles
   ============================================================ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html, body {
    block-size: 100%;
  }

  body {
    margin: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: var(--leading-normal);
    transition: background-color 0.3s, color 0.3s;
  }

  /* Accessible focus outline */
  :focus-visible {
    outline: 2px solid color-mix(in oklab, var(--action-primary) 60%, transparent);
    outline-offset: 2px;
  }

  /* Hidden helper (functional) */
  .hidden {
    display: none !important;
  }

  /* Screenreader-only text */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ============================================================
   UTILITIES
   - Low-specificity helpers using :where(*)
   - Values reference tokens for automatic theming
   ============================================================ */
@layer utilities {
  /* Color / surface bridges */
  :where(.bg-main)            { background-color: var(--bg-secondary); }
  :where(.text-main)          { color: var(--text-primary); }
  :where(.text-secondary)     { color: var(--text-secondary); }
  :where(.border-main)        { border-color: var(--border-primary); }
  :where(.border-secondary)   { border-color: var(--border-secondary); }

  /* Layout helpers */
  :where(.u-center) {
    display: grid;
    place-items: center;
  }
  :where(.u-stack) {
    display: grid;
    gap: var(--space-3);
  }
  :where(.u-cluster) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }
  :where(.u-grid) {
    display: grid;
    gap: var(--space-3);
  }

  /* Spacing shorthands */
  :where(.u-p-2)   { padding: var(--space-2); }
  :where(.u-p-3)   { padding: var(--space-3); }
  :where(.u-p-4)   { padding: var(--space-4); }
  :where(.u-gap-2) { gap: var(--space-2); }
  :where(.u-gap-3) { gap: var(--space-3); }
  :where(.u-gap-4) { gap: var(--space-4); }

  /* Card / shadow */
  :where(.u-card) {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
  }
  :where(.u-shadow) { box-shadow: var(--shadow-2); }

  /* Muted text */
  :where(.u-muted) { color: var(--text-secondary); }

  /* Button reset */
  :where(.btn-reset) {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
  }
}

/* ============================================================
   COMPONENTS
   - Real UI parts and state styling
   ============================================================ */
@layer components {
  /* --- Forms --- */
  .form-input,
  .form-select {
    display: block;
    inline-size: 100%;
    padding: var(--space-2);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.2s ease-in-out;
  }
  .form-input::placeholder {
    color: var(--text-secondary);
  }
  .form-input:focus,
  .form-select:focus {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--action-primary) 25%, transparent);
  }
  .form-radio {
    accent-color: var(--action-primary);
    color: var(--action-primary);
  }
  .radio-group-bg {
    background-color: var(--form-bg);
  }
  .field-accent {
    background-color: var(--form-bg);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2);
  }
  .field-accent:focus {
    outline: none;
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--action-primary) 35%, transparent);
  }

  /* --- Results tints & score states --- */
  .bg-result-excellent { background-color: rgba(74, 222, 128, 0.05); }
  .bg-result-satisfactory { background-color: rgba(250, 204, 21, 0.05); }
  .bg-result-unsatisfactory { background-color: rgba(248, 113, 113, 0.05); }
  .bg-component-pass { background-color: rgba(74, 222, 128, 0.05); }
  .bg-component-fail { background-color: rgba(248, 113, 113, 0.05); }

  .score-display {
    text-align: center;
    font-weight: var(--fw-semibold);
  }
  .score-neutral {
    background-color: var(--form-bg);
    color: var(--text-secondary);
  }

  /* Light theme score boxes */
  .score-pass,
  .risk-low {
    background-color: var(--color-success-bg);
    color: #166534;
  }
  .score-fail,
  .risk-high {
    background-color: var(--color-danger-bg);
    color: #991b1b;
  }
  .risk-moderate {
    background-color: var(--color-warn-bg);
    color: #854d0e;
  }

  /* Background-only tints for boxes (text handled elsewhere) */
  .score-bg-pass { background-color: var(--color-success-bg); }
  .score-bg-mid  { background-color: var(--color-warn-bg); }
  .score-bg-fail { background-color: var(--color-danger-bg); }

  /* Dark theme score overrides */
  :root[data-theme="dark"] .score-pass,
  html.dark .score-pass,
  :root[data-theme="dark"] .risk-low,
  html.dark .risk-low {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
  }
  :root[data-theme="dark"] .score-fail,
  html.dark .score-fail,
  :root[data-theme="dark"] .risk-high,
  html.dark .risk-high {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
  }
  :root[data-theme="dark"] .risk-moderate,
  html.dark .risk-moderate {
    background-color: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border-color: rgba(234, 179, 8, 0.3);
  }
  :root[data-theme="dark"] .score-bg-pass,
  html.dark .score-bg-pass { background-color: rgba(34, 197, 94, 0.15); }
  :root[data-theme="dark"] .score-bg-mid,
  html.dark .score-bg-mid  { background-color: rgba(234, 179, 8, 0.15); }
  :root[data-theme="dark"] .score-bg-fail,
  html.dark .score-bg-fail { background-color: rgba(239, 68, 68, 0.15); }

  /* Disabled states */
  fieldset:disabled,
  section:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  button:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
  }
  html.dark button:disabled {
    background-color: #4b5563;
  }

  /* --- Motion / entrance --- */
  .result-card,
  section {
    transition: all 0.2s ease-in-out;
  }
  .result-card {
    transform: scale(0.95);
    opacity: 0;
  }
  .result-card.show {
    transform: scale(1);
    opacity: 1;
  }
  .fade-in {
    animation: fadeIn 0.3s ease-in-out forwards;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .result-card,
    section { transition: none; }
    .fade-in { animation: none; }
  }

  /* --- Manual vs Selection toggle (checked state fill) --- */
  /* Applies to IDs ending with -manual or -selection */
  input[id$="-manual"]:checked + div,
  input[id$="-selection"]:checked + div {
    background-color: color-mix(in oklab, var(--action-primary) 22%, transparent);
    color: #000000 !important;
    border-color: transparent;
  }
  :root[data-theme="dark"] input[id$="-manual"]:checked + div,
  html.dark input[id$="-manual"]:checked + div,
  :root[data-theme="dark"] input[id$="-selection"]:checked + div,
  html.dark input[id$="-selection"]:checked + div {
    background-color: color-mix(in oklab, var(--action-primary) 28%, transparent);
    color: #ffffff !important;
    border-color: transparent;
  }

  /* --- Sex toggles (override generic fill) --- */
  .radio-group-bg input[name="sex"][value="male"]:checked + div {
    background-color: #bae6fd; /* sky-200 */
    border-color: #7dd3fc;     /* sky-300 */
  }
  html.dark .radio-group-bg input[name="sex"][value="male"]:checked + div,
  :root[data-theme="dark"] .radio-group-bg input[name="sex"][value="male"]:checked + div {
    background-color: rgba(30, 64, 175, 0.40); /* ~blue-900/40 */
    border-color: #2563eb;                     /* blue-600 */
  }
  .radio-group-bg input[name="sex"][value="female"]:checked + div {
    background-color: #fecdd3; /* rose-200 */
    border-color: #fda4af;     /* rose-300 */
  }
  html.dark .radio-group-bg input[name="sex"][value="female"]:checked + div,
  :root[data-theme="dark"] .radio-group-bg input[name="sex"][value="female"]:checked + div {
    background-color: rgba(136, 19, 55, 0.40); /* ~rose-900/40 */
    border-color: #e11d48;                     /* rose-600 */
  }

  /* --- Modal --- */
  #reverse-modal { display: none; }
  #reverse-modal.flex { display: flex; }
  .modal-content {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
  }

  /* --- Tables --- */
  html.dark td[rowspan]:not([rowspan="1"]) { vertical-align: middle; }

  /* --- Visual Selection tones & scrollbars --- */
  .tr-hover-good:hover { background-color: rgba(22,163,74,0.12); }
  .tr-hover-warn:hover { background-color: rgba(202,138,4,0.12); }
  .tr-hover-bad:hover  { background-color: rgba(220,38,38,0.12); }
  .tr-selected-good { background-color: rgba(22,163,74,0.22); }
  .tr-selected-warn { background-color: rgba(202,138,4,0.22); }
  .tr-selected-bad  { background-color: rgba(220,38,38,0.22); }

  .vs-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) transparent;
  }
  .vs-scroll::-webkit-scrollbar { width: 6px; }
  .vs-scroll::-webkit-scrollbar-track { background: transparent; }
  .vs-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
    border-radius: var(--radius-pill);
  }
  html.dark .vs-scroll,
  :root[data-theme="dark"] .vs-scroll {
    scrollbar-color: var(--color-scrollbar) transparent;
  }
  html.dark .vs-scroll::-webkit-scrollbar-thumb,
  :root[data-theme="dark"] .vs-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
  }

  /* --- Containers / panes (portable with container queries) --- */
  .pane {
    container-type: inline-size;
    container-name: pane;
  }

  @container pane (max-width: 42rem) {
    .result-card { padding: var(--space-3); }
  }

  /* --- Safety media fallback --- */
  @media (max-width: 768px) {
    .result-card { padding: var(--space-3); }
  }
}