/*
Theme Name:   Tech Dose Daily
Theme URI:    https://techdosedaily.com
Description:  Child theme for Tech Dose Daily — India-first tech news, reviews, buying guides and opinion. Built on Astra. Self-hosted Inter + JetBrains Mono. Design tokens, typography, components.
Author:       Tech Dose Daily
Author URI:   https://techdosedaily.com
Template:     astra
Version:      1.2.0
License:      Proprietary
Text Domain:  tech-dose-daily-child
Tags:         news, blog, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments, translation-ready, blog
*/

/* ===========================================================================
   Tech Dose Daily — child theme stylesheet
   ===========================================================================
   v1.0.0 — minimal stub
   v1.1.0 — self-hosted Inter typography
   v1.2.0 — Phase 2 Layer 1: design tokens + JetBrains Mono + base typography
   =========================================================================== */


/* ===========================================================================
   1. @font-face — Inter (UI + reading) + JetBrains Mono (tabular contexts)
   font-display: swap shows fallback immediately, swaps to brand font on load.
   =========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Inter-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/JetBrainsMono-Bold.woff2") format("woff2");
}


/* ===========================================================================
   2. Design tokens — single source of truth for the entire design system
   All component CSS in later layers must use these tokens, never hardcode.
   =========================================================================== */

:root {
  /* ---- Colors: brand ---- */
  --tdd-slate-900: #0F172A;    /* primary text, dark surfaces, logo */
  --tdd-slate-700: #334155;    /* secondary text */
  --tdd-slate-500: #64748B;    /* muted text, meta */
  --tdd-slate-300: #CBD5E1;    /* hairline borders, dividers */

  --tdd-rose-700:  #BE123C;    /* hover state for rose buttons */
  --tdd-rose-600:  #E11D48;    /* primary accent, CTAs, brand dot */
  --tdd-rose-500:  #F43F5E;    /* lighter rose for backgrounds */
  --tdd-rose-50:   #FFF1F2;    /* rose-tinted background */

  --tdd-sky-600:   #0284C7;    /* reviews link variant */
  --tdd-sky-500:   #0EA5E9;    /* reviews accent */
  --tdd-sky-50:    #F0F9FF;    /* reviews-tinted background */

  --tdd-amber-500: #F59E0B;    /* mixed verdict, warnings */
  --tdd-amber-50:  #FFFBEB;    /* amber-tinted background */

  --tdd-green-600: #16A34A;    /* recommend verdict, success */
  --tdd-green-50:  #F0FDF4;    /* green-tinted background */

  --tdd-red-600:   #DC2626;    /* avoid verdict, error */
  --tdd-red-50:    #FEF2F2;    /* red-tinted background */

  /* ---- Colors: neutral surface ---- */
  --tdd-zinc-50:   #FAFAFA;    /* page background */
  --tdd-zinc-100:  #F4F4F5;    /* card background, subtle surfaces */
  --tdd-zinc-200:  #E4E4E7;    /* dividers, hairlines */
  --tdd-zinc-400:  #A1A1AA;    /* placeholder text, disabled */
  --tdd-zinc-500:  #71717A;    /* secondary muted */
  --tdd-zinc-700:  #3F3F46;    /* body text on light bg */
  --tdd-zinc-900:  #18181B;    /* near-black for body text */
  --tdd-white:     #FFFFFF;

  /* ---- Colors: semantic aliases (use these in component CSS) ---- */
  --tdd-bg-page:        var(--tdd-zinc-50);
  --tdd-bg-surface:     var(--tdd-white);
  --tdd-bg-subtle:      var(--tdd-zinc-100);
  --tdd-text-primary:   var(--tdd-slate-900);
  --tdd-text-secondary: var(--tdd-slate-700);
  --tdd-text-muted:     var(--tdd-slate-500);
  --tdd-border:         var(--tdd-zinc-200);
  --tdd-border-strong:  var(--tdd-slate-300);
  --tdd-link:           var(--tdd-rose-600);
  --tdd-link-hover:     var(--tdd-rose-700);
  --tdd-accent:         var(--tdd-rose-600);

  /* ---- Typography: font families ---- */
  --tdd-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tdd-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;

  /* ---- Typography: type scale (mobile-first) ----
     Pairs are (size / line-height) in rem. 1rem = 16px assumed.
     Scale rationale: tight modular at small sizes, looser steps at heading sizes.
     Article body intentionally sits at text-base on mobile and text-lg on desktop
     per UI spec: 17/28 mobile → 18/32 desktop.
  */
  --tdd-text-xs:   0.75rem;     /* 12px — meta, micro labels */
  --tdd-text-xs-lh:    1rem;        /* 16px line-height */

  --tdd-text-sm:   0.875rem;    /* 14px — captions, footnotes */
  --tdd-text-sm-lh:    1.25rem;     /* 20px line-height */

  --tdd-text-base: 1rem;        /* 16px — UI default */
  --tdd-text-base-lh:  1.5rem;      /* 24px line-height */

  --tdd-text-md:   1.0625rem;   /* 17px — mobile article body */
  --tdd-text-md-lh:    1.75rem;     /* 28px line-height */

  --tdd-text-lg:   1.125rem;    /* 18px — desktop article body */
  --tdd-text-lg-lh:    2rem;        /* 32px line-height */

  --tdd-text-xl:   1.25rem;     /* 20px — dek, lead, h4 */
  --tdd-text-xl-lh:    1.75rem;     /* 28px line-height */

  --tdd-text-2xl:  1.5rem;      /* 24px — h3 */
  --tdd-text-2xl-lh:   2rem;        /* 32px line-height */

  --tdd-text-3xl:  1.875rem;    /* 30px — h2 */
  --tdd-text-3xl-lh:   2.25rem;     /* 36px line-height */

  --tdd-text-4xl:  2.25rem;     /* 36px — h1 article */
  --tdd-text-4xl-lh:   2.5rem;      /* 40px line-height */

  --tdd-text-5xl:  3rem;        /* 48px — homepage hero (mobile) */
  --tdd-text-5xl-lh:   3.25rem;     /* 52px line-height */

  --tdd-text-6xl:  3.75rem;     /* 60px — homepage hero (desktop) */
  --tdd-text-6xl-lh:   4rem;        /* 64px line-height */

  /* ---- Typography: weights ---- */
  --tdd-weight-regular: 400;
  --tdd-weight-semibold: 600;
  --tdd-weight-bold: 700;

  /* ---- Typography: tracking (letter-spacing) ---- */
  --tdd-tracking-tight:  -0.025em;  /* large headlines */
  --tdd-tracking-normal:  0;        /* body */
  --tdd-tracking-wide:    0.025em;  /* small caps, micro labels */

  /* ---- Spacing scale (modular, 4px base) ---- */
  --tdd-space-1:  0.25rem;     /* 4px  */
  --tdd-space-2:  0.5rem;      /* 8px  */
  --tdd-space-3:  0.75rem;     /* 12px */
  --tdd-space-4:  1rem;        /* 16px */
  --tdd-space-5:  1.25rem;     /* 20px */
  --tdd-space-6:  1.5rem;      /* 24px */
  --tdd-space-8:  2rem;        /* 32px */
  --tdd-space-10: 2.5rem;      /* 40px */
  --tdd-space-12: 3rem;        /* 48px */
  --tdd-space-16: 4rem;        /* 64px */
  --tdd-space-20: 5rem;        /* 80px */
  --tdd-space-24: 6rem;        /* 96px */
  --tdd-space-32: 8rem;        /* 128px */

  /* ---- Border radii ---- */
  --tdd-radius-sm:   0.25rem;  /* 4px — small chips */
  --tdd-radius-md:   0.5rem;   /* 8px — cards, buttons */
  --tdd-radius-lg:   0.75rem;  /* 12px — feature cards */
  --tdd-radius-xl:   1rem;     /* 16px — hero blocks */
  --tdd-radius-full: 9999px;   /* pills */

  /* ---- Shadows (subtle, tech-publication appropriate) ---- */
  --tdd-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --tdd-shadow-md: 0 4px 8px -2px rgb(15 23 42 / 0.06), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --tdd-shadow-lg: 0 10px 20px -4px rgb(15 23 42 / 0.08), 0 4px 8px -2px rgb(15 23 42 / 0.04);

  /* ---- Container widths ---- */
  --tdd-container-narrow: 42rem;   /* 672px — article body */
  --tdd-container-base:   64rem;   /* 1024px — section content */
  --tdd-container-wide:   80rem;   /* 1280px — full-width hero */

  /* ---- Transitions ---- */
  --tdd-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tdd-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===========================================================================
     3. Apply tokens to Astra's variables — propagates through the whole theme
     =========================================================================== */
  --ast-body-font-family:     var(--tdd-font-sans);
  --ast-heading-font-family:  var(--tdd-font-sans);

  /* Tell WordPress's editor what colors to show in the color picker */
  --ast-global-color-0: var(--tdd-rose-600);     /* "Theme Brand" */
  --ast-global-color-1: var(--tdd-sky-500);      /* "Theme Alt Brand" */
  --ast-global-color-2: var(--tdd-slate-900);    /* "Theme Headings" */
  --ast-global-color-3: var(--tdd-zinc-700);     /* "Theme Text" */
  --ast-global-color-4: var(--tdd-zinc-50);      /* "Theme Primary BG" */
  --ast-global-color-5: var(--tdd-white);        /* "Theme Secondary BG" */
  --ast-global-color-6: var(--tdd-zinc-100);     /* "Theme Alternate BG" */
  --ast-global-color-7: var(--tdd-zinc-200);     /* "Theme Subtle BG" */
  --ast-global-color-8: var(--tdd-slate-500);    /* "Theme Other" */
}


/* ===========================================================================
   4. Base typography — apply tokens to native HTML elements
   =========================================================================== */

html {
  /* Smooth font sizing for rem-based scale */
  font-size: 100%;            /* 1rem = 16px */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--tdd-font-sans);
  font-size: var(--tdd-text-md);
  line-height: var(--tdd-text-md-lh);
  font-weight: var(--tdd-weight-regular);
  color: var(--tdd-text-primary);
  background-color: var(--tdd-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Desktop bumps body to 18/32 per UI spec */
@media (min-width: 768px) {
  body {
    font-size: var(--tdd-text-lg);
    line-height: var(--tdd-text-lg-lh);
  }
}

/* Headings — Inter Bold, tight tracking, near-black */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tdd-font-sans);
  font-weight: var(--tdd-weight-bold);
  color: var(--tdd-text-primary);
  letter-spacing: var(--tdd-tracking-tight);
  margin-top: 0;
}

h1 {
  font-size: var(--tdd-text-4xl);
  line-height: var(--tdd-text-4xl-lh);
}

h2 {
  font-size: var(--tdd-text-3xl);
  line-height: var(--tdd-text-3xl-lh);
}

h3 {
  font-size: var(--tdd-text-2xl);
  line-height: var(--tdd-text-2xl-lh);
}

h4 {
  font-size: var(--tdd-text-xl);
  line-height: var(--tdd-text-xl-lh);
}

h5 {
  font-size: var(--tdd-text-lg);
  line-height: var(--tdd-text-lg-lh);
}

h6 {
  font-size: var(--tdd-text-base);
  line-height: var(--tdd-text-base-lh);
  text-transform: uppercase;
  letter-spacing: var(--tdd-tracking-wide);
  color: var(--tdd-text-muted);
}

/* Links — rose primary, underline-on-hover (publication standard) */
a {
  color: var(--tdd-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--tdd-transition-fast);
}

a:hover {
  color: var(--tdd-link-hover);
  text-decoration-thickness: 2px;
}

/* Strong + em — preserve semantic weight */
strong, b {
  font-weight: var(--tdd-weight-bold);
  color: var(--tdd-text-primary);
}

em, i {
  font-style: italic;
}

/* Inline code and pre — JetBrains Mono */
code, kbd, samp, pre, tt {
  font-family: var(--tdd-font-mono);
  font-size: 0.9375em;  /* 15px when parent is 16px */
}

code {
  background-color: var(--tdd-bg-subtle);
  padding: 0.125em 0.375em;
  border-radius: var(--tdd-radius-sm);
  color: var(--tdd-slate-900);
}

pre {
  background-color: var(--tdd-slate-900);
  color: var(--tdd-zinc-100);
  padding: var(--tdd-space-4);
  border-radius: var(--tdd-radius-md);
  overflow-x: auto;
  line-height: 1.625;
}

pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

/* Blockquotes — clean editorial style */
blockquote {
  margin: var(--tdd-space-8) 0;
  padding-left: var(--tdd-space-6);
  border-left: 3px solid var(--tdd-rose-600);
  font-size: var(--tdd-text-xl);
  line-height: var(--tdd-text-xl-lh);
  color: var(--tdd-text-secondary);
  font-style: italic;
}

/* Horizontal rule — hairline */
hr {
  border: 0;
  height: 1px;
  background-color: var(--tdd-border);
  margin: var(--tdd-space-8) 0;
}

/* Tabular data — JetBrains Mono for numbers, Inter for labels.
   When used inside an article, we want monospaced columns.
*/
table {
  font-size: var(--tdd-text-base);
  line-height: var(--tdd-text-base-lh);
  border-collapse: collapse;
  width: 100%;
  margin: var(--tdd-space-6) 0;
}

th {
  font-weight: var(--tdd-weight-semibold);
  text-align: left;
  padding: var(--tdd-space-3) var(--tdd-space-4);
  border-bottom: 2px solid var(--tdd-border-strong);
  color: var(--tdd-text-primary);
  font-size: var(--tdd-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tdd-tracking-wide);
}

td {
  padding: var(--tdd-space-3) var(--tdd-space-4);
  border-bottom: 1px solid var(--tdd-border);
  color: var(--tdd-text-secondary);
  /* Numeric cells get monospace; opt-in via class .num */
  font-variant-numeric: tabular-nums;
}

/* Cells flagged as numeric or monospace use JetBrains Mono */
td.num,
td.mono,
.tdd-mono {
  font-family: var(--tdd-font-mono);
  font-feature-settings: "tnum" 1, "calt" 1;
}


/* ===========================================================================
   5. Belt-and-braces — override anywhere Astra hardcodes a font stack
   =========================================================================== */

body,
button,
input,
select,
textarea,
.ast-site-identity .site-title,
.entry-title,
.entry-content,
.menu-item a,
.ast-builder-html-element {
  font-family: var(--tdd-font-sans);
}


/* ===========================================================================
   6. Utility classes — sparse, only what's universally useful
   =========================================================================== */

.tdd-eyebrow {
  font-size: var(--tdd-text-xs);
  line-height: var(--tdd-text-xs-lh);
  font-weight: var(--tdd-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tdd-tracking-wide);
  color: var(--tdd-rose-600);
}

.tdd-dek {
  font-size: var(--tdd-text-xl);
  line-height: var(--tdd-text-xl-lh);
  color: var(--tdd-text-secondary);
  font-weight: var(--tdd-weight-regular);
}

.tdd-meta {
  font-size: var(--tdd-text-sm);
  line-height: var(--tdd-text-sm-lh);
  color: var(--tdd-text-muted);
}

.tdd-mono {
  font-family: var(--tdd-font-mono);
  font-feature-settings: "tnum" 1, "calt" 1;
}


/* ===========================================================================
   End of v1.2.0 — Phase 2 Layer 1
   Layer 2 (component primitives) and Layer 3 (templates) follow.
   =========================================================================== */