/* ============================================================
   KARIN KRISDIVA — Personal Brand Design System
   colors_and_type.css
   Foundations: color tokens + type tokens + semantic styles.
   ============================================================ */

/* ---------- Fonts (self-hosted variable webfonts) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* ============ BRAND COLORS ============ */
  /* Signature highlighter yellow — the brand's "marker" */
  --brand-yellow:        #FFC53D;   /* primary marigold */
  --brand-yellow-soft:   #FFE08A;   /* soft fill / highlight wash */
  --brand-yellow-wash:   #FFF3CF;   /* faintest tint, section bg */
  --brand-yellow-deep:   #E09600;   /* darker amber for text/icons on light */

  /* Sky blue — secondary accent, used for cards + tags */
  --brand-blue:          #3E97D6;   /* friendly sky blue */
  --brand-blue-soft:     #BFE0F4;   /* soft blue fill */
  --brand-blue-wash:     #EAF4FB;   /* faintest blue tint */
  --brand-blue-deep:     #1F6FA8;   /* deep blue for text/links on light */
  --brand-navy:          #11314C;   /* deep ink-navy for dark sections/footer */

  /* ============ INK / NEUTRALS ============ */
  --ink:                 #1C1B19;   /* warm near-black — body + headings */
  --ink-2:               #4A4843;   /* secondary text */
  --ink-3:               #807C72;   /* muted / captions */
  --ink-4:               #A8A398;   /* faint / placeholder */

  --paper:               #FCFAF4;   /* warm off-white — default page bg */
  --paper-2:             #F5F1E7;   /* warmer card / alt section bg */
  --paper-3:             #ECE7D8;   /* deeper sand for dividers/wells */
  --white:               #FFFFFF;

  /* ============ LINES & SEMANTIC ============ */
  --line:                rgba(28, 27, 25, 0.12);
  --line-strong:         rgba(28, 27, 25, 0.22);
  --ink-line:            #1C1B19;   /* hand-drawn black outline on chips */

  --focus:               #1F6FA8;   /* focus ring */
  --positive:            #2E8B57;
  --link:                var(--brand-blue-deep);

  /* ============ ELEVATION ============ */
  /* Soft, warm-tinted shadows — never cold grey */
  --shadow-sm:  0 1px 2px rgba(40, 33, 12, 0.08);
  --shadow-md:  0 4px 14px rgba(40, 33, 12, 0.10);
  --shadow-lg:  0 14px 38px rgba(40, 33, 12, 0.14);
  /* "Sticker" offset shadow — the playful card lift */
  --shadow-sticker: 4px 4px 0 var(--ink);
  --shadow-sticker-blue: 4px 4px 0 var(--brand-blue-deep);

  /* ============ RADII ============ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ============ SPACING (4px base) ============ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ============ TYPE FAMILIES ============ */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-hand:    "Caveat", "Bricolage Grotesque", cursive;

  /* ============ TYPE SCALE (fluid) ============ */
  --t-display:  clamp(3rem, 1.6rem + 6vw, 5.75rem);   /* hero "Hi! I'm Karin" */
  --t-h1:       clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --t-h2:       clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); /* Q&A section questions */
  --t-h3:       clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  --t-lead:     clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --t-body:     1.0625rem;   /* 17px */
  --t-small:    0.9375rem;   /* 15px */
  --t-micro:    0.8125rem;   /* 13px */
  --t-eyebrow:  0.75rem;     /* 12px label */

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  --measure: 64ch;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply via the .ds- prefixed classes or copy into product CSS.
   ============================================================ */

.ds-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.ds-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
}
.ds-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.ds-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-3);
}
.ds-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue-deep);
}
/* Handwritten accent — echoes the planning note. Use sparingly. */
.ds-hand {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.1;
  color: var(--ink);
}

/* ---------- The signature highlighter mark ---------- */
/* Wrap a word/phrase to give it the hand-swiped marker stroke. */
.ds-mark {
  background-image: linear-gradient(120deg,
      transparent 0.2em, var(--brand-yellow) 0.2em,
      var(--brand-yellow) calc(100% - 0.15em), transparent calc(100% - 0.15em));
  background-repeat: no-repeat;
  background-size: 100% 62%;
  background-position: 0 78%;
  padding: 0 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ds-mark--blue {
  background-image: linear-gradient(120deg,
      transparent 0.2em, var(--brand-blue-soft) 0.2em,
      var(--brand-blue-soft) calc(100% - 0.15em), transparent calc(100% - 0.15em));
}

a { color: var(--link); }