/* =============================================================================
   FOOX BRICKS — Core Stylesheet
   Load order: fonts.css → pico.min.css → pico-custom.css → layout.css → components.css

   This file contains things that are global and brand-level:
   • Design tokens (brand colours, type scale, spacing, shadows, sizes)
   • Pico CSS variable overrides (maps brand tokens onto Pico's theming system)
   • Hard radius reset (square corners everywhere — brand identity)
   • Typography (heading tag styles)
   • Utility classes (text helpers, spacing helpers)
   • Base layout (body-level padding resets)

   layout.css adds structural sections (header, footer, catalog layout).
   components.css adds feature-specific classes (product cards, badges, hero, etc.).
   ============================================================================= */

/* =============================================================================
   DESIGN TOKENS + THEME-NEUTRAL PICO OVERRIDES

   Why :root for these vars and not the theme selectors below?

   Pico v2 sets its color variables under a compound selector:
     [data-theme="light"], :root:not([data-theme="dark"]), :host:not([data-theme="dark"])

   That selector has specificity (0,2,0) — two pseudo-classes/attributes chain.
   A plain :root override only has (0,1,0), so Pico wins and our colors are ignored.

   The fix: put color overrides in the same compound selector (see light theme block
   below). Things that are NOT color-specific — brand tokens, fonts, radius, spacing —
   stay here in :root because Pico sets those in :root too, so (0,1,0) is fine.
   ============================================================================= */
:root {
  /* Compact UI — 14px base instead of Pico's 16px default */
  --pico-font-size: 87.5%;

  /* Brand primaries */
  --color-yellow: #ffcc00;
  --color-yellow-dark: #e6b800;
  --color-yellow-light: #ffe066;

  --color-coral: #ff6b6b;
  --color-coral-dark: #e04f4f;
  --color-coral-light: #ff9494;

  --color-black: #1d1d1b;
  --color-black-soft: #2e2e2b;
  --color-black-muted: #3a3a37;

  --color-white: #ffffff;

  /* Neutrals */
  --color-gray-50: #f5f5f0;
  --color-gray-100: #e8e8e2;
  --color-gray-200: #d0d0c8;
  --color-gray-300: #b0b0a8;
  --color-gray-400: #888882;
  --color-gray-500: #5a5a56;
  --color-gray-600: #3a3a37;
  --color-gray-700: #2e2e2b;
  --color-gray-800: #1d1d1b;

  /* Status */
  --color-success: #2a9d5c;
  --color-warning: var(--color-yellow);
  --color-error: #e63946;
  --color-info: #3a86ff;

  /* Typography — display only; sans-serif and mono are Pico overrides below */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;

  /* Type scale — multiples of --pico-spacing (1rem base) */
  --text-2xs: calc(0.625 * var(--pico-spacing));
  --text-xs:  calc(0.75 * var(--pico-spacing));
  --text-sm:  calc(0.875 * var(--pico-spacing));
  --text-base: var(--pico-spacing);
  --text-lg:  calc(1.25 * var(--pico-spacing));
  --text-xl:  calc(1.5 * var(--pico-spacing));
  --text-2xl: calc(2 * var(--pico-spacing));
  --text-3xl: calc(3 * var(--pico-spacing));
  --text-4xl: calc(4 * var(--pico-spacing));
  --text-5xl: calc(5 * var(--pico-spacing));
  --text-6xl: calc(6 * var(--pico-spacing));

  /* Spacing — multiples of --pico-spacing (1rem base) */
  --space-1:  calc(0.25 * var(--pico-spacing));
  --space-2:  calc(0.5 * var(--pico-spacing));
  --space-3:  calc(0.75 * var(--pico-spacing));
  --space-4:  var(--pico-spacing);
  --space-5:  calc(1.25 * var(--pico-spacing));
  --space-6:  calc(1.5 * var(--pico-spacing));
  --space-8:  calc(2 * var(--pico-spacing));
  --space-10: calc(2.5 * var(--pico-spacing));
  --space-12: calc(3 * var(--pico-spacing));
  --space-16: calc(4 * var(--pico-spacing));
  --space-20: calc(5 * var(--pico-spacing));
  --space-24: calc(6 * var(--pico-spacing));
  --space-32: calc(8 * var(--pico-spacing));

  /* Shadows */
  --shadow-sm: 0 1px 4px rgb(0 0 0 / 6%);
  --shadow-card: 0 2px 8px rgb(0 0 0 / 8%);
  --shadow-card-hover: 0 4px 16px rgb(0 0 0 / 14%);
  --shadow-modal: 0 8px 32px rgb(0 0 0 / 18%);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: var(--pico-transition);

  /* Layout */
  --sidebar-width: calc(17.5 * var(--pico-spacing));
  --header-height: calc(4 * var(--pico-spacing));

  /* Component sizes */
  --btn-height: calc(3.25 * var(--pico-spacing));
  --btn-height-sm: calc(2.25 * var(--pico-spacing));
  --icon-btn-size: calc(3.5 * var(--pico-spacing));

  /* ----- Article / card block spacing ----- */
  --pico-block-spacing-vertical: var(--space-8);
  --pico-block-spacing-horizontal: var(--space-8);

  /* ----- Theme-neutral Pico overrides ----- */
  --pico-font-family-sans-serif: "DM Sans", "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
  --pico-font-family-monospace: "DM Mono", "Courier New", monospace, var(--pico-font-family-emoji);
  --pico-border-radius: 0px;
  --pico-form-element-border-radius: 0px;
  --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --pico-form-element-disabled-opacity: 0.5;
  --pico-loading-spinner-opacity: 0.5;
}

/* =============================================================================
   PICO CSS OVERRIDES — LIGHT THEME

   This selector is copied verbatim from Pico's own source. By matching their
   selector exactly, our specificity is equal and source order decides — since
   this file loads after pico.min.css, our vars win.

   Covers three cases:
     [data-theme="light"]            — explicit light mode forced via attribute
     :root:not([data-theme="dark"])  — default (no attribute set)
     :host:not([data-theme="dark"])  — shadow DOM / web component contexts
   ============================================================================= */
[data-theme="light"],
:root:not([data-theme="dark"]),
:host:not([data-theme="dark"]) {
  /* ----- Colors: page ----- */
  --pico-color: var(--color-black);
  --pico-background-color: var(--color-gray-50);
  --pico-muted-color: var(--color-gray-400);
  --pico-muted-border-color: var(--color-gray-200);

  /* ----- Colors: headings ----- */
  --pico-h1-color: var(--color-black);
  --pico-h2-color: var(--color-black);
  --pico-h3-color: var(--color-black-soft);
  --pico-h4-color: var(--color-black-muted);
  --pico-h5-color: var(--color-black-muted);
  --pico-h6-color: var(--color-gray-500);

  /* ----- Colors: primary (yellow) ----- */
  --pico-primary: var(--color-yellow);
  --pico-primary-background: var(--color-yellow);
  --pico-primary-border: var(--color-yellow);
  --pico-primary-underline: color-mix(in srgb, var(--color-yellow) 50%, transparent);
  --pico-primary-hover: var(--color-yellow-dark);
  --pico-primary-hover-background: var(--color-yellow-dark);
  --pico-primary-hover-border: var(--color-yellow-dark);
  --pico-primary-focus: color-mix(in srgb, var(--color-yellow) 25%, transparent);
  --pico-primary-inverse: var(--color-black);

  /* ----- Colors: secondary (coral) ----- */
  --pico-secondary: var(--color-coral);
  --pico-secondary-background: var(--color-coral);
  --pico-secondary-underline: color-mix(in srgb, var(--color-coral) 50%, transparent);
  --pico-secondary-hover: var(--color-coral-dark);
  --pico-secondary-hover-background: var(--color-coral-dark);
  --pico-secondary-focus: color-mix(in srgb, var(--color-coral) 25%, transparent);
  --pico-secondary-inverse: var(--color-white);

  /* ----- Colors: contrast (black) ----- */
  --pico-contrast: var(--color-black);
  --pico-contrast-background: var(--color-black);
  --pico-contrast-border: var(--color-black);
  --pico-contrast-underline: color-mix(in srgb, var(--color-black) 50%, transparent);
  --pico-contrast-hover: var(--color-black-soft);
  --pico-contrast-hover-background: var(--color-black-soft);
  --pico-contrast-hover-border: var(--color-black-soft);
  --pico-contrast-focus: color-mix(in srgb, var(--color-black) 25%, transparent);
  --pico-contrast-inverse: var(--color-white);

  /* ----- Colors: text selection ----- */
  --pico-text-selection-color: color-mix(in srgb, var(--color-yellow) 25%, transparent);

  /* ----- Colors: cards & forms ----- */
  --pico-card-background-color: var(--color-white);
  --pico-card-border-color: var(--color-gray-100);
  --pico-card-sectioning-background-color: var(--color-gray-50);
  --pico-form-element-background-color: var(--color-white);
  --pico-form-element-selected-background-color: var(--color-gray-100);
  --pico-form-element-active-background-color: var(--color-white);
  --pico-form-element-color: var(--color-black);
  --pico-form-element-border-color: var(--color-gray-200);
  --pico-form-element-active-border-color: var(--color-yellow);
  --pico-form-element-focus-color: var(--color-yellow);
  --pico-form-element-valid-border-color: var(--color-success);
  --pico-form-element-invalid-border-color: var(--color-error);
  --pico-form-element-invalid-active-border-color: var(--color-error);
  --pico-form-element-valid-active-border-color: var(--color-success);

  /* ----- Shadow ----- */
  --pico-box-shadow: none;

  /* ----- Typography: mark / ins / del ----- */
  --pico-mark-background-color: color-mix(in srgb, var(--color-yellow) 30%, transparent);
  --pico-mark-color: var(--color-black);
  --pico-ins-color: var(--color-success);
  --pico-del-color: var(--color-error);

  /* ----- Table ----- */
  --pico-table-row-stripped-background-color: color-mix(in srgb, var(--color-black) 4%, transparent);

  /* ----- Code ----- */
  --pico-code-background-color: var(--color-gray-100);
  --pico-code-color: var(--color-gray-500);

  /* ----- Switch ----- */
  --pico-switch-background-color: var(--color-gray-300);
  --pico-switch-color: var(--color-white);
  --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);

  /* ----- Range ----- */
  --pico-range-border-color: var(--color-gray-200);
  --pico-range-active-border-color: var(--color-gray-300);

  /* ----- Dropdown ----- */
  --pico-dropdown-background-color: var(--color-white);
  --pico-dropdown-border-color: var(--color-gray-100);
  --pico-dropdown-hover-background-color: var(--color-gray-50);

  /* ----- Misc ----- */
  --pico-modal-overlay-background-color: color-mix(in srgb, var(--color-black) 75%, transparent);
  --pico-progress-background-color: var(--color-gray-200);

  /* ----- Form validation icons ----- */
  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232a9d5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

/* =============================================================================
   PICO CSS OVERRIDES — DARK THEME

   [data-theme="dark"] has specificity (0,1,0) — same as Pico's dark selector —
   so source order wins here too. No compound selector needed because Pico's
   dark-forced rule is also just [data-theme="dark"].

   Note: auto dark mode (prefers-color-scheme: dark) is handled by Pico's own
   @media block. We don't override it because we don't currently support auto
   dark — the site defaults to light and only switches on explicit data-theme="dark".
   ============================================================================= */
[data-theme="dark"] {
  --pico-color: var(--color-gray-50);
  --pico-background-color: var(--color-black);
  --pico-muted-color: var(--color-gray-400);
  --pico-muted-border-color: var(--color-black-soft);

  --pico-h1-color: var(--color-gray-50);
  --pico-h2-color: var(--color-gray-100);
  --pico-h3-color: var(--color-gray-200);
  --pico-h4-color: var(--color-gray-300);
  --pico-h5-color: var(--color-gray-300);
  --pico-h6-color: var(--color-gray-400);

  --pico-primary: var(--color-yellow);
  --pico-primary-background: var(--color-yellow);
  --pico-primary-border: var(--color-yellow);
  --pico-primary-underline: color-mix(in srgb, var(--color-yellow) 50%, transparent);
  --pico-primary-hover: var(--color-yellow-dark);
  --pico-primary-hover-background: var(--color-yellow-dark);
  --pico-primary-hover-border: var(--color-yellow-dark);
  --pico-primary-focus: color-mix(in srgb, var(--color-yellow) 25%, transparent);
  --pico-primary-inverse: var(--color-black);

  --pico-secondary: var(--color-coral);
  --pico-secondary-background: var(--color-coral);
  --pico-secondary-underline: color-mix(in srgb, var(--color-coral) 50%, transparent);
  --pico-secondary-hover: var(--color-coral-dark);
  --pico-secondary-hover-background: var(--color-coral-dark);
  --pico-secondary-focus: color-mix(in srgb, var(--color-coral) 25%, transparent);
  --pico-secondary-inverse: var(--color-white);

  --pico-contrast: var(--color-gray-100);
  --pico-contrast-background: var(--color-gray-50);
  --pico-contrast-underline: color-mix(in srgb, var(--color-gray-100) 50%, transparent);
  --pico-contrast-hover: var(--color-white);
  --pico-contrast-hover-background: var(--color-white);
  --pico-contrast-focus: color-mix(in srgb, var(--color-gray-100) 25%, transparent);
  --pico-contrast-inverse: var(--color-black);

  --pico-text-selection-color: color-mix(in srgb, var(--color-yellow) 20%, transparent);

  --pico-card-background-color: var(--color-black-soft);
  --pico-card-border-color: var(--color-black-soft);
  --pico-card-sectioning-background-color: var(--color-black-soft);
  --pico-form-element-background-color: var(--color-black-soft);
  --pico-form-element-selected-background-color: var(--color-black-muted);
  --pico-form-element-active-background-color: var(--color-black-soft);
  --pico-form-element-color: var(--color-gray-100);
  --pico-form-element-placeholder-color: var(--color-gray-500);
  --pico-form-element-border-color: var(--color-black-muted);
  --pico-form-element-active-border-color: var(--color-yellow);
  --pico-form-element-invalid-border-color: var(--color-error);
  --pico-form-element-invalid-active-border-color: var(--color-error);
  --pico-form-element-valid-active-border-color: var(--color-success);

  --pico-box-shadow: none;

  --pico-mark-background-color: color-mix(in srgb, var(--color-yellow) 25%, transparent);
  --pico-mark-color: var(--color-black);
  --pico-ins-color: var(--color-success);
  --pico-del-color: var(--color-error);

  --pico-table-row-stripped-background-color: color-mix(in srgb, var(--color-white) 3%, transparent);

  --pico-code-background-color: var(--color-black-soft);
  --pico-code-color: var(--color-gray-400);

  --pico-switch-background-color: var(--color-black-muted);

  --pico-range-border-color: var(--color-black-soft);
  --pico-range-active-border-color: var(--color-black-muted);

  --pico-dropdown-background-color: var(--color-black-soft);
  --pico-dropdown-border-color: var(--color-black-muted);
  --pico-dropdown-hover-background-color: var(--color-black-muted);

  --pico-modal-overlay-background-color: color-mix(in srgb, var(--color-black) 85%, transparent);
  --pico-progress-background-color: var(--color-black-muted);

  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232a9d5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

/* =============================================================================
   BUTTONS
   Apply display font and heavy weight to all button-like elements globally.
   ============================================================================= */
/* Mirror Pico's exact attribute selectors so specificity ties and source order wins.
   Pico uses [type=submit] (0,1,0) which beats a plain `button` (0,0,1) override.
   Adding the attribute-selector forms here matches Pico's specificity and our later
   load order takes over. */
button,
[role="button"],
[type="submit"],
[type="button"],
[type="reset"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

button.outline:hover,
[role="button"].outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   HARD RADIUS RESET — 0px everywhere, no exceptions
   Pico ships with rounded corners; the Foox Bricks brand is strictly square.
   ============================================================================= */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* =============================================================================
   TYPOGRAPHY
   Heading tag overrides — display font, weights, and sizes.
   Utility classes for text styling live below in UTILITIES.
   ============================================================================= */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
}

h1 {
  font-weight: 900;
  font-size: var(--text-5xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h3 {
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.15;
}

h4 {
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
}

h5 {
  font-family: var(--pico-font-family);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h6 {
  font-family: var(--pico-font-family);
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: 1.55;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* =============================================================================
   UTILITIES
   Single-purpose helper classes. Keep these generic — no page or component names.
   ============================================================================= */
.text-muted {
  color: var(--pico-muted-color);
}

/* Horizontal scan-line overlay — requires position:relative on the element */
.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 4px);
  pointer-events: none;
  z-index: 0;
}

.part-number {
  font-family: var(--pico-font-family-monospace);
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}

.overline {
  font-weight: 500;
  font-size: var(--text-2xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.label {
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.body-sm {
  font-size: var(--text-sm);
  line-height: 1.55;
}

.body-lg {
  font-size: var(--text-lg);
  line-height: 1.55;
}

/* =============================================================================
   BASE LAYOUT
   Body-level resets that override Pico's default padding on structural elements.
   ============================================================================= */
body > footer,
body > header,
body > main {
  padding-block: 0;
}

section {
  margin-bottom: 0;
}

/* Blades top scroller (<a href="#top">): Blades colours the icon black, which vanishes
   in dark mode, so use the theme's link colour instead. */
[href="#top"] > i {
  color: var(--pico-color);
  border-color: var(--pico-color);
}