/* Blacktop — app/assets/stylesheets/tokens.css.
   Every existing semantic token name is preserved; values only.
   New tokens (marked NEW) need one consumer each before merging, per css-standard §4.
   Light-mode --color-focus and --color-border-strong are corrected from the
   Original handoff values were corrected: raw accent yellow (#F5C519) measures
   1.6:1 against white/light surfaces, below the WCAG 1.4.11 3:1 minimum for
   focus indicators and interactive component borders. Dark-mode values already
   pass and are unchanged. */

:root {
  color-scheme: light;
  --color-ink: #1B1C19;
  --color-muted: #5D5F58;
  --color-bg: #F6F6F3;                    /* NEW: page background behind surfaces */
  --color-surface: #FFFFFF;
  --color-surface-muted: #EEEEE9;
  --color-surface-code: #F3F3EF;
  --color-surface-translucent: rgb(255 255 255 / 96%);
  --color-border: #DFE0DA;
  --color-border-strong: #8B8D85;         /* NEW: input borders; darkened from #C9CBC2 for 3:1 vs white */
  --color-brand: #1B1C19;                 /* buttons/links are ink in light mode */
  --color-brand-dark: #000000;
  --color-brand-tint: #FAF4DC;            /* soft yellow paper for tinted surfaces */
  --color-brand-ring: rgb(27 28 25 / 15%);
  --color-on-brand: #FFFFFF;
  --color-accent: #F5C519;                /* NEW: signal yellow — fills/markers only, never text on light */
  --color-on-accent: #1B1C19;             /* NEW */
  --color-heading-marker: #F5C519;
  --color-footer-bg: #1B1C19;
  --color-footer-ink: #ABADA3;
  --color-footer-link: #F1F1EC;
  --color-focus: #1B1C19;                 /* ink, not accent yellow: 17:1 vs white; outline 3px, offset 2px */
  --color-danger: #B42318;
  --color-danger-ink: #9A1F15;
  --color-danger-surface: #FAEFED;
  --color-danger-ring: rgb(180 35 24 / 12%);
  --color-hero-start: #F6F6F3;            /* flat — no gradient in Blacktop */
  --color-hero-end: #F6F6F3;
  --color-diagram-outline: #33352E;
  --color-diagram-outline-muted: #6B6D64;
  --color-diagram-concrete-top: #DDDDD6;
  --color-diagram-concrete-front: #AFB0A7;
  --color-diagram-concrete-side: #C6C7BE;
  --color-diagram-soil: #E2DCCB;
  --color-diagram-concrete: #BBBCB3;
  --color-diagram-concrete-rim: #D3D4CC;
  --color-diagram-wood: #9C7853;
  --color-diagram-wood-outline: #4E3A28;
  --color-diagram-wall: #EFEFEA;
  --color-diagram-paint-can: #E8E4D2;
  --color-diagram-flooring: #E9E7DB;
  --color-diagram-package: #DDDDD6;
  --color-diagram-earth-outline: #57452C;
  --color-diagram-mulch: #B08F55;
  --color-diagram-ground: #D9D2BE;
  --color-diagram-gravel: #AAA89D;
  --color-diagram-gravel-outline: #4A4B45;
  --color-diagram-subgrade: #D6C5A4;
  --image-select-chevron:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235D5F58' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --shadow-card: 0 1px 2px rgb(27 28 25 / 8%), 0 3px 10px rgb(27 28 25 / 5%);
  --shadow-card-lg: 0 2px 4px rgb(27 28 25 / 6%), 0 10px 28px rgb(27 28 25 / 9%);
  --radius-small: 0.375rem;   /* inputs, buttons, chips  (6px) */
  --radius-medium: 0.5rem;    /* cards, choice cards     (8px) */
  --radius-large: 0.625rem;   /* panels                  (10px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --content-width: 72rem;
  --wide-content-width: 131rem;
  --text-width: 46rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ink: #F1F1EC;
  --color-muted: #ABADA3;
  --color-bg: #131311;
  --color-surface: #1C1D1A;
  --color-surface-muted: #24251F;
  --color-surface-code: #171815;
  --color-surface-translucent: rgb(28 29 26 / 96%);
  --color-border: #383A32;
  --color-border-strong: #45473E;
  --color-brand: #F5C519;                 /* buttons flip to yellow in dark */
  --color-brand-dark: #FFD73E;
  --color-brand-tint: #2E2A12;
  --color-brand-ring: rgb(245 197 25 / 30%);
  --color-on-brand: #1B1C19;
  --color-accent: #F5C519;
  --color-on-accent: #1B1C19;
  --color-heading-marker: rgb(245 197 25 / 40%);
  --color-footer-bg: #1C1D1A;
  --color-footer-ink: #ABADA3;
  --color-footer-link: #F1F1EC;
  --color-focus: #F5C519;
  --color-danger: #FF8A80;
  --color-danger-ink: #FFB3AD;
  --color-danger-surface: #392019;
  --color-danger-ring: rgb(255 138 128 / 24%);
  --color-hero-start: #131311;
  --color-hero-end: #131311;
  --color-diagram-outline: #B2B4AA;
  --color-diagram-outline-muted: #A29A88;
  --color-diagram-concrete-top: #5C5E56;
  --color-diagram-concrete-front: #43453E;
  --color-diagram-concrete-side: #50524A;
  --color-diagram-soil: #565042;
  --color-diagram-concrete: #55574F;
  --color-diagram-concrete-rim: #6A6C63;
  --color-diagram-wood: #77593F;
  --color-diagram-wood-outline: #C4A47C;
  --color-diagram-wall: #262722;
  --color-diagram-paint-can: #4A4630;
  --color-diagram-flooring: #3A3B2E;
  --color-diagram-package: #4C4E46;
  --color-diagram-earth-outline: #C2A46B;
  --color-diagram-mulch: #6E5631;
  --color-diagram-ground: #4B4638;
  --color-diagram-gravel: #55564F;
  --color-diagram-gravel-outline: #B0B1A8;
  --color-diagram-subgrade: #64553D;
  --image-select-chevron:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ABADA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --shadow-card: 0 1px 3px rgb(0 0 0 / 32%), 0 5px 18px rgb(0 0 0 / 24%);
  --shadow-card-lg: 0 2px 4px rgb(0 0 0 / 32%), 0 10px 34px rgb(0 0 0 / 36%);
}