/* ==========================================================================
   Design tokens — AP Drilling brand book
   Colors, type, radii and layout widths. Every other stylesheet reads these;
   change a value here and it updates the whole site (light and dark).
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #FBFAF9;              /* warm off-white, biased toward the brand's warm gray */
  --bg-rgb: 251, 250, 249;    /* --bg as rgb(), for the hero fade */
  --surface: #F1EDEC;         /* soft panel, tinted with Gris AP */

  /* Text */
  --ink: #282727;             /* Negro AP */
  --ink-2: #5E5052;           /* body copy */
  --muted: #82686A;           /* Gris AP */
  --line: rgba(40, 39, 39, .10);

  /* Brand */
  --red: #E1081E;             /* Rojo AP */
  --red-deep: #B71821;
  --on-red: #FFFFFF;
  --orange: #F18426;          /* product color, used only for steel and carbide */

  /* Logo (the SVG reads these, so the nav can switch it to white) */
  --logo-red: #E0081E;
  --logo-gray: #81676A;
  --client-logo-filter: none;

  /* Liquid glass */
  --glass: rgba(255, 255, 255, .52);
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-shadow: 0 10px 40px rgba(40, 39, 39, .12), 0 1px 2px rgba(40, 39, 39, .06);
  --glass-blur: blur(22px) saturate(180%);

  /* 3D product stage */
  --stage-hi: #FFFFFF;
  --stage-lo: #E9E3E1;

  /* Carbide button (Valores dots, Servicios dial) */
  --carbide: radial-gradient(circle at 36% 30%, #FFE3C6 0%, #FFB574 14%, #F28B2E 46%, #D66710 76%, #9A4307 100%);

  /* Type */
  --font: "Nunito Sans", "Avenir Next", Avenir, system-ui, sans-serif;

  /* Shape and layout */
  --r-lg: 28px;
  --r-md: 18px;
  --wrap: 1200px;
  --nav-offset: calc(env(safe-area-inset-top, 0px) + 108px);  /* room left above a section when jumping to it */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* Dark theme: follows the system unless the page is forced light,
   and applies when the host sets data-theme="dark". Keep both blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141212; --bg-rgb: 20, 18, 18; --surface: #1F1B1B;
    --ink: #F4F0EF; --ink-2: #C9BDBE; --muted: #A8908F; --line: rgba(255, 255, 255, .10);
    --red: #F0283A; --red-deep: #C21C28; --orange: #F5953F;
    --logo-gray: #B3A3A4; --client-logo-filter: invert(1);
    --glass: rgba(28, 24, 24, .48); --glass-strong: rgba(28, 24, 24, .70); --glass-edge: rgba(255, 255, 255, .16);
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
    --stage-hi: #3A3232; --stage-lo: #191515;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141212; --bg-rgb: 20, 18, 18; --surface: #1F1B1B;
  --ink: #F4F0EF; --ink-2: #C9BDBE; --muted: #A8908F; --line: rgba(255, 255, 255, .10);
  --red: #F0283A; --red-deep: #C21C28; --orange: #F5953F;
  --logo-gray: #B3A3A4; --client-logo-filter: invert(1);
  --glass: rgba(28, 24, 24, .48); --glass-strong: rgba(28, 24, 24, .70); --glass-edge: rgba(255, 255, 255, .16);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
  --stage-hi: #3A3232; --stage-lo: #191515;
  color-scheme: dark;
}