/* ============================================================
   Dinho Hair Company — Colors & Type
   Visual language: minimal, urban, high-contrast.
   Black canvas + a single yellow brand pop.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Brand colors ---------- */
  --dinho-yellow:        #F5D000;   /* primary brand */
  --dinho-yellow-hover:  #FFDE2E;   /* hover state — slightly lighter */
  --dinho-yellow-press:  #D9B800;   /* pressed — slightly darker */
  --dinho-yellow-soft:   rgba(245, 208, 0, 0.12); /* tinted bg, focus ring */

  --dinho-black:         #0A0A0A;   /* canvas */
  --dinho-white:         #FFFFFF;

  /* Neutrals (dark-only system — no light mode) */
  --dinho-gray-1:        #1C1C1C;   /* card / elevated surface */
  --dinho-gray-2:        #8A8A8A;   /* secondary text / inactive icons */
  --dinho-gray-3:        #2A2A2A;   /* hairline borders, dividers */
  --dinho-gray-4:        #404040;   /* disabled surface */

  /* ---------- Semantic ---------- */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;

  --success-soft: rgba(34, 197, 94, 0.16);
  --warning-soft: rgba(245, 158, 11, 0.16);
  --danger-soft:  rgba(239, 68, 68, 0.16);

  /* ---------- Foreground tokens ---------- */
  --fg-1: var(--dinho-white);       /* primary text on black */
  --fg-2: #D4D4D4;                  /* body emphasis */
  --fg-3: var(--dinho-gray-2);      /* secondary / caption */
  --fg-accent: var(--dinho-yellow); /* H3, CTAs, links */

  --bg-canvas:  var(--dinho-black);
  --bg-surface: var(--dinho-gray-1);
  --bg-raised:  #232323;

  --border-hairline: var(--dinho-gray-3);
  --border-strong:   var(--dinho-gray-2);
  --border-focus:    var(--dinho-yellow);

  /* ---------- Typography stacks ---------- */
  --font-display: "Sora", "Poppins", system-ui, sans-serif;  /* H1–H2 */
  --font-body:    "Inter", "Sora", system-ui, sans-serif;    /* body */
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (mobile-first; pt-equivalent in px) ---------- */
  --t-h1:      28px;     --t-h1-lh: 34px;
  --t-h2:      22px;     --t-h2-lh: 28px;
  --t-h3:      18px;     --t-h3-lh: 24px;
  --t-body:    15px;     --t-body-lh: 22px;
  --t-body-lg: 17px;     --t-body-lg-lh: 26px;
  --t-button:  16px;     --t-button-lh: 20px;
  --t-caption: 12px;     --t-caption-lh: 16px;
  --t-tag:     11px;     --t-tag-lh: 14px;   /* uppercase + tracking */

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;     /* lateral screen padding minimum */
  --s-5:  20px;
  --s-6:  24px;     /* section padding */
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;

  /* ---------- Radii ---------- */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;     /* default buttons */
  --r-lg:  16px;     /* cards */
  --r-xl:  24px;     /* sheets */
  --r-pill: 999px;

  /* ---------- Shadows / elevation (dark mode — use yellow glow sparingly) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.55);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.65);
  --glow-yellow: 0 0 0 4px rgba(245, 208, 0, 0.25);
  --glow-yellow-strong: 0 8px 28px rgba(245, 208, 0, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --tap-min: 44px;                /* WCAG / Apple HIG */
  --screen-px: 16px;              /* lateral padding minimum */
  --section-gap: 24px;
}

/* ============================================================
   Semantic element styles — drop colors_and_type.css into a page
   and headings/body/links/etc inherit Dinho's voice automatically.
   ============================================================ */

html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  color: var(--fg-1);
  letter-spacing: -0.005em;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  color: var(--fg-accent);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}

.caption, small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-caption);
  line-height: var(--t-caption-lh);
  color: var(--fg-3);
}

.tag, .eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-tag);
  line-height: var(--t-tag-lh);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}

.button-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-button);
  line-height: var(--t-button-lh);
  color: var(--dinho-black);
  letter-spacing: 0.01em;
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.85; }

code, pre {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-surface);
  color: var(--fg-2);
  border-radius: var(--r-xs);
  padding: 1px 6px;
}

::selection {
  background: var(--dinho-yellow);
  color: var(--dinho-black);
}