/* ========== Softidia Universal Theme (global only) ==========
   Scope: color tokens, typography, resets, focus styles.
   No component-specific styling. Works site-wide.
   Font: "Jost" (variable), loaded via <link> in header view.
==============================================================*/

/* --- Minimal modern reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

/* --- Theme tokens --- */
:root{
  /* Base (dark theme by default) */
  --bg-900: #0B0C10;    /* near-black for smooth gradients */
  --bg-800: #111318;
  --text-100: #F6F7FB;  /* primary text on dark */
  --text-300: #D9DCE3;  /* secondary text */
  --text-500: #A9AFBA;

  /* Brand metals */
  --gold-100:#FFF3C2; --gold-300:#FFE79A; --gold-500:#F5C451; --gold-700:#D4A017; --gold-900:#8A6B00;
  --silver-100:#F5F7FA; --silver-300:#E6EAF0; --silver-500:#C9CFD6; --silver-700:#A6ADB7; --silver-900:#717782;

  /* Accent (cheerful, optional) */
  --accent-500:#FF4D8D;   /* hot pink */
  --accent-600:#4CC9F0;   /* electric blue */

  /* Semantic aliases (use these in your pages) */
  --surface: var(--bg-900);
  --text-primary: var(--text-100);
  --text-muted: var(--text-500);
  --brand-gold: var(--gold-500);
  --brand-silver: var(--silver-500);

  /* Typographic scale */
  --step--1: clamp(0.88rem, 0.82rem + 0.3vw, 0.97rem);
  --step-0 : clamp(1.00rem, 0.92rem + 0.50vw, 1.10rem);
  --step-1 : clamp(1.25rem, 1.05rem + 1.00vw, 1.50rem);
  --step-2 : clamp(1.60rem, 1.20rem + 1.80vw, 2.00rem);
  --step-3 : clamp(2.00rem, 1.40rem + 2.80vw, 2.70rem);
  --step-4 : clamp(2.60rem, 1.70rem + 3.80vw, 3.50rem);

  /* Spacing & radius (optional, universally safe) */
  --r: 12px;
  --gap: 1rem;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(76, 201, 240, .45);
}

/* --- Base dark theme --- */
html, body {
  background: var(--surface);
  color: var(--text-primary);
  font-family: "Jost", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Typography (universal) --- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-weight: 700;          /* Jost looks great at 600–800 */
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }
h6 { font-size: var(--step--1); }

p, ul, ol { margin: 0 0 1em; color: var(--text-primary); }
small { font-size: var(--step--1); color: var(--text-500); }
.muted { color: var(--text-muted); }

/* --- Links (neutral by default; you can override per section) --- */
a { color: var(--silver-100); text-underline-offset: 2px; }
a:hover { color: var(--gold-300); }

/* --- Universal utilities (safe anywhere) --- */
.u-gold-text{
  background: linear-gradient(180deg,var(--gold-100),var(--gold-500) 55%,var(--gold-900));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.u-silver-text{
  background: linear-gradient(180deg,var(--silver-100),var(--silver-500) 55%,var(--silver-900));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.u-bg-dark { background: var(--bg-900) !important; color: var(--text-primary) !important; }
.u-text-muted { color: var(--text-muted) !important; }

/* --- Strong, code, hr (typography basics) --- */
strong { font-weight: 700; }
code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; }
hr { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 2rem 0; }

/* --- Focus visibility (a11y) --- */
:where(a, button, input, select, textarea):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }