/* =========================================================
   PinFlicker — Design Tokens
   Colors, type, spacing, radius, elevation, motion.
   ========================================================= */

/* Self-hosted Archivo Black — eliminates Google Fonts round-trip for the LCP headline font.
   Declared weight 400 900 so it matches both how Google catalogs it (400)
   and how the CSS requests it (900) without browser weight synthesis. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: local('Archivo Black'), local('ArchivoBlack-Regular'),
       url('../fonts/archivo-black.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ======================================================
     COLOR — Brand
     ====================================================== */
  --pf-near-black:      #0e0f0c;
  --pf-green:           #9fe870;
  --pf-green-dark:      #163300;
  --pf-green-mint:      #e2f6d5;
  --pf-green-pastel:    #cdffad;
  --pf-green-tint:      rgba(211, 242, 192, 0.4);

  /* Neutrals */
  --pf-white:           #ffffff;
  --pf-off-white:       #fafaf7;
  --pf-surface-light:   #e8ebe6;
  --pf-warm-dark:       #454745;
  --pf-gray:            #868685;
  --pf-hairline:        rgba(14, 15, 12, 0.12);

  /* Semantic */
  --pf-positive:        #054d28;
  --pf-positive-tint:   rgba(5, 77, 40, 0.08);
  --pf-danger:          #d03238;
  --pf-danger-tint:     rgba(208, 50, 56, 0.08);
  --pf-warning:         #ffd11a;
  --pf-info:            rgba(56, 200, 255, 0.10);
  --pf-orange:          #ffc091;

  /* ======================================================
     COLOR — Semantic roles
     ====================================================== */
  --color-fg-1:         var(--pf-near-black);
  --color-fg-2:         var(--pf-warm-dark);
  --color-fg-3:         var(--pf-gray);
  --color-fg-on-green:  var(--pf-green-dark);
  --color-fg-on-dark:   var(--pf-off-white);

  --color-bg-1:         var(--pf-white);
  --color-bg-2:         var(--pf-off-white);
  --color-bg-3:         var(--pf-surface-light);
  --color-bg-dark:      var(--pf-near-black);

  --color-accent:       var(--pf-green);
  --color-accent-strong:var(--pf-green-dark);
  --color-accent-soft:  var(--pf-green-mint);

  --color-border:       var(--pf-hairline);
  --color-border-strong:var(--pf-warm-dark);
  --color-border-accent:var(--pf-green);

  --color-positive:     var(--pf-positive);
  --color-danger:       var(--pf-danger);
  --color-warning:      var(--pf-warning);
  --color-info:         var(--pf-info);

  /* ======================================================
     TYPE — Families
     ====================================================== */
  --font-display: 'Archivo Black', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ======================================================
     TYPE — Scale
     ====================================================== */
  --fs-display-mega:  126px;
  --fs-display-hero:  96px;
  --fs-section:       64px;
  --fs-sub:           40px;
  --fs-alt-heading:   78px;
  --fs-card-title:    26px;
  --fs-feature-title: 22px;
  --fs-body:          18px;
  --fs-caption:       14px;
  --fs-small:         12px;

  /* Weights */
  --fw-display:       900;
  --fw-body-default:  600;
  --fw-body-regular:  400;
  --fw-body-bold:     700;

  /* Line heights */
  --lh-display:  0.85;
  --lh-heading:  1.10;
  --lh-tight:    1.23;
  --lh-body:     1.44;
  --lh-loose:    1.86;

  /* Letter spacing */
  --ls-display:         0;
  --ls-alt-heading:     -2.34px;
  --ls-card-title:      -0.39px;
  --ls-feature-title:   -0.396px;
  --ls-body:            0.18px;
  --ls-body-semibold:   -0.108px;
  --ls-caption:         -0.084px;

  /* ======================================================
     SPACING — 8pt base
     ====================================================== */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ======================================================
     RADIUS
     ====================================================== */
  --radius-xs:    2px;
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    20px;
  --radius-xl:    30px;
  --radius-2xl:   40px;
  --radius-pill:  9999px;
  --radius-circle:50%;

  /* ======================================================
     ELEVATION — ring-shadow system, no drop shadows
     ====================================================== */
  --ring-hairline: rgba(14, 15, 12, 0.12) 0 0 0 1px;
  --ring-strong:   rgba(14, 15, 12, 0.24) 0 0 0 1px;
  --ring-inset:    rgb(134, 134, 133) 0 0 0 1px inset;
  --ring-focus:    var(--pf-green) 0 0 0 3px, var(--pf-near-black) 0 0 0 4px;

  /* ======================================================
     MOTION
     ====================================================== */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.5, 0, 0.75, 0);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1:    120ms;
  --dur-2:    200ms;
  --dur-3:    320ms;

  --scale-hover: 1.05;
  --scale-press: 0.95;
}

/* =========================================================
   GLOBAL BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html, body {
  background: var(--color-bg-1);
  color: var(--color-fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-default);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body-semibold);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "calt" 1;
}

/* Display type classes */
.pf-display-mega,
.pf-display-hero,
.pf-section-heading,
.pf-sub-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-feature-settings: "calt" 1;
  color: var(--color-fg-1);
  margin: 0;
}
.pf-display-mega    { font-size: var(--fs-display-mega); }
.pf-display-hero    { font-size: var(--fs-display-hero); }
.pf-section-heading { font-size: var(--fs-section); }
.pf-sub-heading     { font-size: var(--fs-sub); }

.pf-alt-heading {
  font-family: var(--font-body);
  font-weight: var(--fw-body-default);
  font-size: var(--fs-alt-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-alt-heading);
  font-feature-settings: "calt" 1;
  margin: 0;
}

.pf-card-title {
  font-family: var(--font-body);
  font-weight: var(--fw-body-default);
  font-size: var(--fs-card-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-card-title);
  margin: 0;
}

.pf-feature-title {
  font-family: var(--font-body);
  font-weight: var(--fw-body-default);
  font-size: var(--fs-feature-title);
  line-height: 1.25;
  letter-spacing: var(--ls-feature-title);
  margin: 0;
}

.pf-body {
  font-family: var(--font-body);
  font-weight: var(--fw-body-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
.pf-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-body-regular);
  font-size: var(--fs-caption);
  line-height: 1.50;
  letter-spacing: var(--ls-caption);
}

/* =========================================================
   COMPONENTS — Buttons
   ========================================================= */
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--fw-body-default);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
  padding: 14px 20px;
  text-decoration: none;
  transition:
    transform var(--dur-1) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
  font-feature-settings: "calt" 1;
}
.pf-btn:hover  { transform: scale(var(--scale-hover)); }
.pf-btn:active { transform: scale(var(--scale-press)); }
.pf-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.pf-btn--primary {
  background: var(--pf-green);
  color: var(--pf-green-dark);
}
.pf-btn--primary:hover { background: var(--pf-green-pastel); }

.pf-btn--secondary {
  background: rgba(22, 51, 0, 0.08);
  color: var(--pf-near-black);
}
.pf-btn--secondary:hover { background: rgba(22, 51, 0, 0.14); }

.pf-btn--ghost {
  background: transparent;
  color: var(--pf-near-black);
  box-shadow: var(--ring-hairline);
}
.pf-btn--ghost:hover { background: var(--pf-green-tint); }

.pf-btn--dark {
  background: var(--pf-near-black);
  color: var(--pf-off-white);
}
.pf-btn--dark:hover { background: #000; }

.pf-btn--sm  { padding: 8px 14px;  font-size: 14px; }
.pf-btn--lg  { padding: 18px 28px; font-size: 20px; }
.pf-btn--xl  { padding: 22px 36px; font-size: 22px; }

/* =========================================================
   COMPONENTS — Badge / chip
   ========================================================= */
.pf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pf-green-mint);
  color: var(--pf-green-dark);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-body-default);
  letter-spacing: var(--ls-caption);
}
.pf-badge--positive { background: var(--pf-green-mint); color: var(--pf-positive); }
.pf-badge--danger   { background: var(--pf-danger-tint); color: var(--pf-danger); }
.pf-badge--warning  { background: rgba(255, 209, 26, 0.25); color: #7a5a00; }
.pf-badge--dark     { background: var(--pf-near-black); color: var(--pf-green); }

/* =========================================================
   COMPONENTS — Input / Textarea / Select
   ========================================================= */
.pf-input, .pf-textarea, .pf-select {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--pf-near-black);
  background: var(--pf-white);
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--ring-hairline);
  transition: box-shadow var(--dur-2) var(--ease-out);
  font-feature-settings: "calt" 1;
  -webkit-appearance: none;
  appearance: none;
}
.pf-textarea { min-height: 140px; resize: vertical; border-radius: 14px; }
.pf-select   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 7l5 5 5-5' stroke='%23868685' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.pf-input:focus, .pf-textarea:focus, .pf-select:focus {
  outline: none;
  box-shadow: var(--pf-near-black) 0 0 0 2px;
}
.pf-input::placeholder, .pf-textarea::placeholder { color: var(--pf-gray); }