/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn"
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/


/* ==========================================================================
   SCALE DESIGN SYSTEM — Brand Style Guide 2026
   ========================================================================== */

:root {

  /* ── Fonts ───────────────────────────────────────────────────────────── */
  --font-sans: "General Sans", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;

  /* ── Core Colors ─────────────────────────────────────────────────────── */
  --color-text: #262626;
  --color-background: #ffffff;
  --color-white: #ffffff;
  --color-black: #262626;

  /* ── UI Colors ───────────────────────────────────────────────────────── */
  --color-border: rgba(38, 38, 38, 0.14);
  --color-muted: rgba(38, 38, 38, 0.72);

  /* ── Service Colors ──────────────────────────────────────────────────── */
  --service-strategy: #c58cff;
  --service-design: #ff8a5b;
  --service-web: #6ee7ff;
  --service-marketing: #d7ff64;
  --service-process: #8effc1;

  /* ── Typography Sizes ────────────────────────────────────────────────── */
  --type-overline-size: clamp(16px, 1vw, 20px);
  --type-hero-size: clamp(52px, 6vw, 96px);
  --type-headline-size: clamp(40px, 4.5vw, 72px);
  --type-statement-size: clamp(30px, 3vw, 46px);
  --type-large-body-size: clamp(24px, 2vw, 34px);
  --type-body-size: clamp(18px, 1.15vw, 21px);
  --type-small-body-size: clamp(14px, .9vw, 16px);
  --type-button-size: clamp(15px, .9vw, 16px);

  /* ── Line Heights ────────────────────────────────────────────────────── */
  --line-overline: 1.3;
  --line-hero: 0.94;
  --line-headline: 1;
  --line-statement: 1.1;
  --line-large-body: 1.4;
  --line-body: 1.65;
  --line-small-body: 1.45;
  --line-button: 1;

  /* ── Letter Spacing ──────────────────────────────────────────────────── */
  --spacing-overline: -0.01em;
  --spacing-hero: 0em;
  --spacing-headline: -0.01em;
  --spacing-statement: 0em;
  --spacing-large-body: 0em;
  --spacing-body: 0em;
  --spacing-small-body: 0em;
  --spacing-button: 0em;
}


/* ==========================================================================
   TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

.type-overline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--type-overline-size);
  line-height: var(--line-overline);
  letter-spacing: var(--spacing-overline);
  color: var(--color-text);
}

.type-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-headline-size);
  line-height: var(--line-headline);
  letter-spacing: var(--spacing-headline);
  color: var(--color-text);
}

.type-statement {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-statement-size);
  line-height: var(--line-statement);
  letter-spacing: var(--spacing-statement);
  color: var(--color-text);
}

.type-large-body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-large-body-size);
  line-height: var(--line-large-body);
  letter-spacing: var(--spacing-large-body);
  color: var(--color-text);
}

.type-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-size);
  line-height: var(--line-body);
  letter-spacing: var(--spacing-body);
  color: var(--color-text);
}

.type-small-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-small-body-size);
  line-height: var(--line-small-body);
  letter-spacing: var(--spacing-small-body);
  color: var(--color-text);
}

.type-button,
button,
.button {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-button-size);
  line-height: var(--line-button);
  letter-spacing: var(--spacing-button);
}

.button-l {
  font-size: clamp(18px, 1.2vw, 22px);
  line-height: 1;
  font-weight: 500;
}

.button-xl {
  font-size: clamp(22px, 1.5vw, 28px);
  line-height: 1;
  font-weight: 500;
}