/* =========================================================
   Deepprod — Foundations
   Colors + Type tokens. Import this file at the root of any
   prototype to inherit the brand defaults.
   ========================================================= */

@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand colors (from Guideline 2025) ---------- */
  --dp-ink:        #010107;   /* near-black navy. primary surface + ink */
  --dp-paper:      #F7F7F7;   /* off-white. neutral surface */
  --dp-blue:       #00138B;   /* signature deep blue */

  /* Tints / shades derived for working comfortably */
  --dp-ink-90:     #0A0A14;
  --dp-ink-80:     #14141F;
  --dp-ink-60:     #2A2A38;
  --dp-blue-700:   #000C5C;   /* darker blue, used in deep-end of gradient */
  --dp-blue-500:   #00138B;   /* core */
  --dp-blue-300:   #2C3FB3;   /* lifted blue, hover/lift state */
  --dp-blue-100:   #C9CEEB;   /* tint for backgrounds, dividers */
  --dp-paper-200:  #ECECEC;   /* slightly recessed paper */
  --dp-paper-400:  #C8C8C8;   /* hairline / disabled on paper */
  --dp-line:       rgba(247, 247, 247, 0.12); /* hairline on dark */
  --dp-line-ink:   rgba(1, 1, 7, 0.08);       /* hairline on light */

  /* ---------- Semantic foreground/background ---------- */
  --fg-1: var(--dp-ink);             /* primary on light */
  --fg-2: rgba(1, 1, 7, 0.66);       /* secondary on light */
  --fg-3: rgba(1, 1, 7, 0.40);       /* tertiary on light */
  --fg-on-dark-1: var(--dp-paper);   /* primary on dark */
  --fg-on-dark-2: rgba(247, 247, 247, 0.72);
  --fg-on-dark-3: rgba(247, 247, 247, 0.45);

  --bg-paper: var(--dp-paper);
  --bg-paper-recessed: var(--dp-paper-200);
  --bg-ink: var(--dp-ink);
  --bg-blue: var(--dp-blue);

  /* Signature gradient — top: deep blue, bottom: near-black */
  --dp-gradient: linear-gradient(180deg, #00138B 0%, #000C5C 45%, #010107 100%);
  --dp-gradient-radial: radial-gradient(120% 80% at 50% 0%, #00138B 0%, #000C5C 50%, #010107 100%);

  /* ---------- Type ---------- */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;

  /* Brand voice = lowercase + period. Use these utility tokens for sizing. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.45;
  --leading-loose:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;   /* used on small caps + tags */
  --tracking-xwide:  0.18em;   /* used on DEEPPROD wordmark caps */

  /* ---------- Radius / Shadow / Spacing ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(1,1,7,0.06), 0 1px 1px rgba(1,1,7,0.04);
  --shadow-md: 0 6px 18px rgba(1,1,7,0.10), 0 2px 4px rgba(1,1,7,0.06);
  --shadow-lg: 0 24px 60px rgba(1,1,7,0.18), 0 6px 12px rgba(1,1,7,0.08);
  --shadow-glow-blue: 0 0 0 1px rgba(0,19,139,0.25), 0 12px 32px rgba(0,19,139,0.35);

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* =========================================================
   Element defaults — apply when this file is imported into a
   page that wants the brand voice automatically.
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;        /* signature: ExtraBold Italic for hero display */
  font-size: clamp(56px, 8vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(40px, 5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  text-transform: lowercase;
  margin: 0;
}

p, .p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  margin: 0;
}

.eyebrow,
.tag {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* The wordmark style — DEEPPROD. uppercase, x-wide tracking */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
}

/* Lowercase + period — the brand signature ("deep.", "fin.", "by.") */
.signature {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: var(--tracking-tight);
}
.signature::after { content: "."; }

/* Helpers */
.surface-paper { background: var(--bg-paper); color: var(--fg-1); }
.surface-ink   { background: var(--bg-ink);   color: var(--fg-on-dark-1); }
.surface-blue  { background: var(--bg-blue);  color: var(--fg-on-dark-1); }
.surface-gradient { background: var(--dp-gradient); color: var(--fg-on-dark-1); }