/* ===== tokens/colors.css ===== */
/* Drains Now Inc. — Color tokens
 * Source of truth: the Drains Now Inc. logo (blue wordmark, orange clock + emblem).
 * Palette confirmed by brand owner: orange #F7941D + blue #2B6CB8 / #4A90D9 on dark navy.
 */
:root {
  /* ---- Brand: Blue (primary identity) ---- */
  --blue-900: #0B1F33;   /* deep navy — headers, footers, hero backdrops */
  --blue-800: #123353;
  --blue-700: #1E4E80;
  --blue-600: #2B6CB8;   /* service blue — primary actions, links, headings */
  --blue-500: #4A90D9;   /* bright blue — accents, icons, hovers */
  --blue-400: #6FA9E2;
  --blue-200: #BBD6F1;
  --blue-100: #E3EFFA;
  --blue-50:  #F0F6FC;

  /* ---- Brand: Orange (urgency accent) ---- */
  --orange-700: #C46A06;
  --orange-600: #E07F0E;
  --orange-500: #F7941D;  /* primary orange — Book Now, Emergency, urgent CTAs */
  --orange-400: #FBA94A;
  --orange-200: #FBD9A8;
  --orange-100: #FDEBCF;
  --orange-50:  #FEF6EA;

  /* ---- Neutrals ---- */
  --white:      #FFFFFF;
  --grey-50:    #F5F7FA;  /* light grey — page / section background */
  --grey-100:   #EDF1F6;
  --grey-200:   #DCE3EC;
  --grey-300:   #C4CFDC;
  --grey-400:   #9AA8B8;
  --grey-500:   #6B7B8C;
  --grey-600:   #4A5868;
  --grey-700:   #313D4B;
  --grey-800:   #1F2933;  /* charcoal — body text */
  --grey-900:   #11181F;  /* near-black */

  /* ---- Semantic: status ---- */
  --success-500: #1E9E5A;
  --success-100: #DEF3E7;
  --warning-500: #F7941D;
  --warning-100: #FDEBCF;
  --danger-600:  #D23B2E;  /* "Call Now" red used in conversion CTAs */
  --danger-500:  #E2463A;
  --danger-100:  #FBE0DD;
  --info-500:    #4A90D9;

  /* ---- Semantic aliases ---- */
  --brand-primary:   var(--blue-600);
  --brand-secondary: var(--blue-500);
  --brand-accent:    var(--orange-500);
  --brand-ink:       var(--blue-900);

  --text-strong:   var(--blue-900);   /* headings */
  --text-body:     var(--grey-800);   /* paragraphs */
  --text-muted:    var(--grey-500);   /* captions, meta */
  --text-inverse:  var(--white);      /* on navy/blue/orange */
  --text-link:     var(--blue-600);
  --text-link-hover: var(--blue-500);

  --surface-page:    var(--grey-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--grey-100);
  --surface-navy:    var(--blue-900);
  --surface-blue:    var(--blue-600);
  --surface-accent:  var(--orange-500);

  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--grey-400);

  --focus-ring: var(--blue-500);
}

/* ===== tokens/typography.css ===== */
/* Drains Now Inc. — Typography tokens */
:root {
  /* Families */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;
  --weight-black:    900;

  /* Type scale (desktop) — display uses Montserrat, text uses Figtree */
  --text-display:   clamp(2.75rem, 5vw, 4.5rem);  /* 44–72px hero headlines */
  --text-h1:        clamp(2.25rem, 3.5vw, 3rem);  /* 36–48px */
  --text-h2:        clamp(1.75rem, 2.6vw, 2.25rem);/* 28–36px section heads */
  --text-h3:        1.5rem;     /* 24px */
  --text-h4:        1.25rem;    /* 20px */
  --text-lead:      1.1875rem;  /* 19px intro paragraphs */
  --text-base:      1.0625rem;  /* 17px body */
  --text-sm:        0.9375rem;  /* 15px */
  --text-xs:        0.8125rem;  /* 13px meta / labels */

  /* Line heights */
  --leading-tight:   1.05;   /* display */
  --leading-snug:    1.2;    /* headings */
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;   /* body copy */

  /* Letter spacing */
  --tracking-tight:  -0.02em; /* large display */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;  /* eyebrows / overlines, uppercased */

  /* Reusable roles */
  --eyebrow: var(--weight-bold) var(--text-xs)/1.2 var(--font-display);
}

/* ===== tokens/spacing.css ===== */
/* Drains Now Inc. — Spacing & layout tokens
 * 4px base grid. Generous section rhythm for a clean, uncluttered service site.
 */
:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Section vertical padding */
  --section-y:        var(--space-20);
  --section-y-tight:  var(--space-12);

  /* Content widths */
  --container-max: 1200px;
  --container-wide: 1320px;
  --measure: 68ch;        /* readable paragraph width */

  /* Gutters */
  --gutter:        var(--space-6);
  --gutter-mobile: var(--space-4);
}

/* ===== tokens/effects.css ===== */
/* Drains Now Inc. — Effects: radius, shadow, motion, gradients */
:root {
  /* Corner radii — friendly but not pill-soft; CTAs are noticeably rounded */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* cards, inputs */
  --radius-lg:   14px;   /* feature cards, media */
  --radius-xl:   20px;
  --radius-pill: 999px;  /* buttons, badges, chips */

  /* Shadows — soft, cool-tinted (navy) elevation */
  --shadow-xs:  0 1px 2px rgba(11, 31, 51, 0.06);
  --shadow-sm:  0 2px 6px rgba(11, 31, 51, 0.08);
  --shadow-md:  0 6px 18px rgba(11, 31, 51, 0.10);
  --shadow-lg:  0 14px 36px rgba(11, 31, 51, 0.14);
  --shadow-xl:  0 26px 60px rgba(11, 31, 51, 0.20);
  /* Colored CTA glows */
  --shadow-orange: 0 8px 22px rgba(247, 148, 29, 0.34);
  --shadow-blue:   0 8px 22px rgba(43, 108, 184, 0.30);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(74, 144, 217, 0.45);

  /* Motion — quick, confident, no bounce */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.45, 0, 0.25, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* Brand gradients — used on hero/footer/section backdrops */
  --grad-navy:   linear-gradient(160deg, #123353 0%, #0B1F33 60%, #081726 100%); /* @kind color */
  --grad-blue:   linear-gradient(135deg, #2B6CB8 0%, #4A90D9 100%); /* @kind color */
  --grad-orange: linear-gradient(135deg, #F7941D 0%, #E07F0E 100%); /* @kind color */
}

/* ===== tokens/base.css ===== */
/* Drains Now Inc. — Base element styles & a few helpers.
 * Light-touch resets so brand defaults apply when consumers just link styles.css.
 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-snug);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: var(--weight-extra); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-extra); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-bold); }

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); }

strong, b { font-weight: var(--weight-bold); }

/* Eyebrow / overline — recurring brand device above section headings */
.dn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-accent);
}

/* Container helper */
.dn-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

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

/* ===== page styles (from design helmet) ===== */

  *{box-sizing:border-box;}
  body{margin:0;background:#F5F7FA;color:#1F2933;font-family:'Figtree',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;}
  img{max-width:100%;display:block;}
  ::selection{background:rgba(247,148,29,.25);}
  .dn-show-mobile{display:none!important;}
  @media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}
  @media (max-width:980px){
    .dn-hide-mobile{display:none!important;}
    .dn-show-mobile{display:flex!important;}
    .dn-hero-grid{grid-template-columns:1fr!important;}
    .dn-why-grid{grid-template-columns:1fr!important;}
    .dn-two-col{grid-template-columns:1fr!important;}
    .dn-svc-grid{grid-template-columns:1fr 1fr!important;}
    .dn-rev-grid{grid-template-columns:1fr!important;}
    .dn-blog-grid{grid-template-columns:1fr!important;}
    .dn-area-grid{grid-template-columns:repeat(2,1fr)!important;}
    .dn-foot-grid{grid-template-columns:1fr 1fr!important;}
    .dn-detail-grid{grid-template-columns:1fr!important;}
    footer{padding-bottom:80px!important;}
  }
  @media (max-width:560px){
    .dn-svc-grid{grid-template-columns:1fr!important;}
    .dn-stat-row{grid-template-columns:1fr 1fr!important;}
    .dn-foot-grid{grid-template-columns:1fr!important;}
  }
  @media (max-width:480px){ .dn-pair{grid-template-columns:1fr!important;} }
  .dn-hero-grid:has(> :only-child){grid-template-columns:1fr!important;}
  a{color:#2B6CB8;}
  a:hover{color:#0B1F33;}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #F7941D;outline-offset:2px;border-radius:4px;}
  .dn-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#0B1F33;color:#fff;padding:14px 20px;font-family:'Figtree',sans-serif;font-weight:700;font-size:15px;border-radius:0 0 10px 0;text-decoration:none;}
  .dn-skip:focus{left:0;}
  @keyframes dnfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


/* ===== static export additions ===== */
.dn-drawer[hidden],.dn-dropdown[hidden]{display:none!important;}
/* FAQs are captured expanded so their answers are in the HTML for crawlers.
   These rules override the baked-in open-state inline styles for closed items. */
.dn-faq-a{display:none;}
.dn-faq-item[data-open="1"] .dn-faq-a{display:block;}
.dn-faq-item{background:#fff!important;}
.dn-faq-item[data-open="1"]{background:#F0F6FC!important;}
.dn-faq-chev{transform:none!important;}
.dn-faq-item[data-open="1"] .dn-faq-chev{transform:rotate(180deg)!important;}

/* blog category filter — inline styles come from the captured "All" state */
.dn-cat-chip{background:#fff!important;color:#0B1F33!important;border-color:#DCE3EC!important;}
.dn-cat-chip[data-active="1"]{background:#0B1F33!important;color:#fff!important;border-color:#0B1F33!important;}
.dn-post-card[hidden]{display:none!important;}