/* ============================================================
   OufMatch — Design Tokens
   Import this file in any artifact, mock, or production page.
   ============================================================ */

/* Webfonts: Baloo 2 (display) + Nunito Sans (body) — local variable TTFs. */
@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo2-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Baloo2-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/NunitoSans-VariableFont.ttf') format('truetype-variations'),
       url('../fonts/NunitoSans-VariableFont.ttf') format('truetype');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- COLORS — base palette -------- */
  --cream:        #FAF6EF;   /* primary background (warm, never orange) */
  --sand:         #F0E7D8;   /* secondary surfaces, idle bars, neutral tags */
  --paper:        #FFFFFF;   /* cards, inputs, modals */
  --night:        #20223A;   /* text, dark sections */
  --night-2:      #2A2C45;   /* slightly lighter night, for surfaces on dark */

  --coral:        #EF5E6A;   /* brand accent — logo, score, hero highlights */
  --coral-deep:   #D33D4B;   /* hover/pressed coral */
  --coral-soft:   #FF8A95;   /* gradient pair for avatars */

  --berry:        #6C5CE7;   /* secondary accent, skill tags */
  --berry-deep:   #5847D6;

  --mint:         #16BFA6;   /* secondary button, success, availability */
  --mint-deep:    #0E8C7A;
  --mint-soft:    #13AC97;

  --sun:          #FFC75A;   /* primary button, highlights */
  --sun-deep:     #F6BC42;
  --sun-text:     #9A6B00;   /* readable text on sun-tinted bg */

  --muted:        #6E7191;   /* secondary text */
  --line:         rgba(32,34,58,0.10);
  --line-strong:  rgba(32,34,58,0.20);

  /* -------- COLORS — tinted surfaces (precomputed) -------- */
  --tint-coral:   rgba(239,94,106,0.10);
  --tint-coral-strong: rgba(239,94,106,0.18); /* focus halo */
  --tint-berry:   rgba(108,92,231,0.12);
  --tint-mint:    rgba(22,191,166,0.14);
  --tint-mint-bg: rgba(22,191,166,0.09);  /* "do" callout */
  --tint-sun:     rgba(255,199,90,0.22);

  /* -------- COLORS — semantic -------- */
  --bg:           var(--cream);
  --bg-elevated:  var(--paper);
  --bg-sunken:    var(--sand);
  --bg-inverse:   var(--night);

  --fg:           var(--night);
  --fg-muted:     var(--muted);
  --fg-inverse:   var(--cream);
  --fg-brand:     var(--coral);

  --border:       var(--line);
  --border-strong:var(--line-strong);
  --border-focus: var(--coral);

  --success:      var(--mint);
  --danger:       var(--coral);
  --info:         var(--berry);
  --warning:      var(--sun);

  /* -------- TYPE -------- */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, sans-serif;

  /* Type scale */
  --fs-display:   clamp(40px, 7.5vw, 78px);  /* H1 hero */
  --fs-h1:        clamp(34px, 6vw, 54px);
  --fs-h2:        clamp(26px, 4vw, 42px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-lead:      19px;
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-caption:   14px;
  --fs-meta:      13px;
  --fs-kicker:    13px;          /* uppercase, tracked */
  --fs-micro:     11px;

  /* Weights */
  --fw-display:   800;            /* Baloo 2 max */
  --fw-bold:      700;
  --fw-semibold:  600;
  --fw-regular:   400;

  /* Line heights */
  --lh-tight:     1.0;
  --lh-snug:      1.2;
  --lh-normal:    1.55;
  --lh-relaxed:   1.7;

  /* Tracking */
  --tracking-kicker: 0.04em;

  /* -------- SPACING -------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   18px;
  --s-5:   24px;
  --s-6:   34px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;

  /* -------- RADII -------- */
  --r-sm:   10px;     /* inputs, small chips */
  --r-md:   14px;     /* buttons, small cards */
  --r-lg:   18px;     /* large cards, modals, photos */
  --r-pill: 999px;    /* tags, avatars, progress bars */

  /* -------- SHADOWS -------- */
  --sh-sm:    0 4px 14px rgba(32,34,58,0.05);
  --sh-md:    0 14px 34px rgba(32,34,58,0.07);  /* standard card shadow */
  --sh-lg:    0 24px 60px rgba(32,34,58,0.10);

  --sh-sun:   0 4px 14px rgba(255,199,90,0.40);
  --sh-sun-h: 0 8px 22px rgba(255,199,90,0.50);
  --sh-mint:  0 4px 14px rgba(22,191,166,0.28);
  --sh-mint-h:0 8px 22px rgba(22,191,166,0.38);
  --sh-coral: 0 4px 14px rgba(239,94,106,0.28);

  --halo-coral: 0 0 0 3px var(--tint-coral-strong);

  /* -------- LAYOUT -------- */
  --maxw-content: 1080px;
  --maxw-prose:   640px;
  --gutter:       24px;
  --nav-h:        64px;

  /* -------- MOTION -------- */
  --t-fast:   120ms;
  --t-base:   180ms;
  --t-slow:   260ms;
  --ease:     cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   Base type — apply these on raw tags so plain HTML looks right.
   ============================================================ */

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  color: var(--fg);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

p { font-size: var(--fs-body); color: var(--fg); line-height: var(--lh-normal); text-wrap: pretty; }
small { font-size: var(--fs-caption); color: var(--fg-muted); }
strong, b { font-weight: var(--fw-bold); }

a {
  color: var(--berry);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
a:hover { color: var(--berry-deep); }

/* Utility — kicker (small uppercase eyebrow text) */
.kicker {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Utility — focusable elements get the coral halo */
:where(input, textarea, select, button):focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--halo-coral);
}

/* ============================================================
   Component primitives (optional — components in UI kits override)
   ============================================================ */

.btn {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
  border: none;
  border-radius: var(--r-md);
  padding: 13px 26px;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  color: var(--night);
}
.btn-primary   { background: var(--sun);   box-shadow: var(--sh-sun); }
.btn-primary:hover   { background: var(--sun-deep);  transform: translateY(-2px); box-shadow: var(--sh-sun-h); }
.btn-secondary { background: var(--mint);  box-shadow: var(--sh-mint); }
.btn-secondary:hover { background: var(--mint-soft); transform: translateY(-2px); box-shadow: var(--sh-mint-h); }
.btn-ghost     { background: var(--paper); border: 2px solid var(--line-strong); padding: 11px 24px; }
.btn-ghost:hover { border-color: var(--mint); color: var(--mint-deep); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-md);
}

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.tag-berry { background: var(--tint-berry); color: var(--berry); }
.tag-mint  { background: var(--tint-mint);  color: var(--mint-deep); }
.tag-sun   { background: var(--tint-sun);   color: var(--sun-text); }
.tag-sand  { background: var(--sand);       color: var(--night); }
.tag-coral { background: var(--tint-coral); color: var(--coral-deep); }