/* ============================================================
   Prizeflow — Colors & Type Tokens
   Soft Neumorphism 2.0 · Outfit
   ============================================================ */

/* Outfit — primary source is Google Fonts (canonical per-weight files,
   identical to the FIP one-pager). Must precede other rules. */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");

/* Self-hosted Outfit variable font — OFFLINE fallback only (distinct family
   name so Google's canonical copy renders when available). */
@font-face {
  font-family: "Outfit Local";
  src: url("fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (from prizeflow - Colors.jpg) ---------- */
  --brand-purple:       #564787;   /* primary accent, logo "flow" */
  --brand-lilac:        #DBCBD8;   /* soft secondary */
  --brand-mist:         #F2FDFF;   /* near-white tint */
  --brand-teal:         #9AD4D6;   /* success / secondary accent */
  --brand-ink:          #101935;   /* deep slate, dark mode canvas */

  /* ---------- Extended purple scale ---------- */
  --purple-50:   #F3F1F8;
  --purple-100:  #E2DCED;
  --purple-200:  #C4B9DB;
  --purple-300:  #A594C7;
  --purple-400:  #806AAA;
  --purple-500:  #564787;   /* brand */
  --purple-600:  #493A71;
  --purple-700:  #3A2E5B;
  --purple-800:  #2B2344;
  --purple-900:  #1C172E;

  /* ---------- Extended teal scale ---------- */
  --teal-50:    #EEF9FA;
  --teal-100:   #DCF1F2;
  --teal-200:   #BFE5E6;
  --teal-300:   #9AD4D6;   /* brand */
  --teal-400:   #6FBEC1;
  --teal-500:   #4BA5A8;
  --teal-600:   #3A8689;
  --teal-700:   #2D6A6C;

  /* ---------- Neutral "clay" (warm off-white → slate) ---------- */
  --clay-0:     #FFFFFF;
  --clay-25:    #FBFAFE;   /* canvas highlight */
  --clay-50:    #F4F2F9;   /* LIGHT CANVAS  — the "clay" */
  --clay-100:   #ECE8F2;
  --clay-200:   #DAD4E4;
  --clay-300:   #BDB5CC;
  --clay-400:   #938AA6;
  --clay-500:   #6B6380;
  --clay-600:   #4D475D;
  --clay-700:   #332E42;
  --clay-800:   #1F1B2E;
  --clay-900:   #141022;

  /* ---------- Semantic ---------- */
  --success:    #3A8689;   /* teal-600, high-contrast */
  --success-soft: #DCF1F2;
  --warning:    #C88A2E;
  --warning-soft: #FBEED3;
  --danger:     #C64A5B;
  --danger-soft: #F8DADF;
  --info:       #564787;
  --info-soft:  #E2DCED;

  /* ---------- Surface / Background ---------- */
  --bg-canvas:    var(--clay-50);    /* the clay */
  --bg-raised:    var(--clay-50);    /* neumorphic raised uses same tone */
  --bg-inset:     var(--clay-50);
  --bg-elevated:  var(--clay-25);    /* slight highlight over canvas */
  --bg-overlay:   rgba(20, 16, 34, 0.45);

  /* ---------- Foreground (text) ---------- */
  --fg-1:         var(--clay-900);   /* primary */
  --fg-2:         var(--clay-700);   /* secondary */
  --fg-3:         var(--clay-500);   /* tertiary / meta */
  --fg-4:         var(--clay-400);   /* disabled */
  --fg-on-brand:  #FFFFFF;
  --fg-accent:    var(--purple-500);

  /* ---------- Borders (hair-thin, used sparingly in Neu 2.0) ---------- */
  --border-1: rgba(86, 71, 135, 0.08);
  --border-2: rgba(86, 71, 135, 0.16);
  --border-strong: rgba(20, 25, 53, 0.24);

  /* ============================================================
     NEUMORPHIC SHADOW SYSTEM
     dual shadows: light from top-left, dark from bottom-right
     ============================================================ */
  --shadow-light: rgba(255, 255, 255, 0.95);
  --shadow-dark:  rgba(86, 71, 135, 0.18);
  --shadow-dark-strong: rgba(86, 71, 135, 0.28);

  /* raised surfaces */
  --neu-raised-sm:
      -2px -2px 5px var(--shadow-light),
      3px 3px 6px var(--shadow-dark);
  --neu-raised-md:
      -4px -4px 10px var(--shadow-light),
      6px 6px 14px var(--shadow-dark);
  --neu-raised-lg:
      -8px -8px 20px var(--shadow-light),
      12px 12px 28px var(--shadow-dark);
  --neu-raised-xl:
      -12px -12px 30px var(--shadow-light),
      18px 18px 40px var(--shadow-dark-strong);

  /* inset surfaces (inputs, wells) */
  --neu-inset-sm:
      inset 2px 2px 4px var(--shadow-dark),
      inset -2px -2px 4px var(--shadow-light);
  --neu-inset-md:
      inset 3px 3px 7px var(--shadow-dark),
      inset -3px -3px 7px var(--shadow-light);
  --neu-inset-lg:
      inset 5px 5px 12px var(--shadow-dark),
      inset -5px -5px 12px var(--shadow-light);

  /* pressed (raised → inset transition) */
  --neu-pressed:
      inset 2px 2px 5px var(--shadow-dark),
      inset -2px -2px 5px var(--shadow-light);

  /* flat high-contrast CTAs (NOT neumorphic — WCAG safety) */
  --shadow-cta:
      0 1px 0 rgba(255, 255, 255, 0.2) inset,
      0 10px 24px -8px rgba(86, 71, 135, 0.55),
      0 2px 4px rgba(20, 25, 53, 0.15);
  --shadow-cta-hover:
      0 1px 0 rgba(255, 255, 255, 0.2) inset,
      0 14px 30px -8px rgba(86, 71, 135, 0.65),
      0 2px 6px rgba(20, 25, 53, 0.2);

  /* focus ring — always visible, always high contrast */
  --focus-ring: 0 0 0 3px rgba(86, 71, 135, 0.35);

  /* ---------- Radii ---------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---------- Spacing (4px 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;

  /* ---------- Type scale ---------- */
  --font-sans: "Outfit", "Outfit Local", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Outfit", "Outfit Local", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;  /* Outfit used in place of a mono family, by design */

  /* font weights */
  --fw-light: 300;    /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */
  --fw-black: 800;    /* @kind font */

  /* display (hero) */
  --fs-display-xl: 72px;     /* @kind font */
  --lh-display-xl: 1.02;     /* @kind font */
  --ls-display-xl: -0.03em;  /* @kind font */
  --fs-display-lg: 56px;     /* @kind font */
  --lh-display-lg: 1.05;     /* @kind font */
  --ls-display-lg: -0.028em; /* @kind font */
  --fs-display-md: 44px;     /* @kind font */
  --lh-display-md: 1.08;     /* @kind font */
  --ls-display-md: -0.025em; /* @kind font */

  /* headings */
  --fs-h1: 36px;     /* @kind font */
  --lh-h1: 1.15;     /* @kind font */
  --ls-h1: -0.02em;  /* @kind font */
  --fs-h2: 28px;     /* @kind font */
  --lh-h2: 1.2;      /* @kind font */
  --ls-h2: -0.016em; /* @kind font */
  --fs-h3: 22px;     /* @kind font */
  --lh-h3: 1.25;     /* @kind font */
  --ls-h3: -0.012em; /* @kind font */
  --fs-h4: 18px;     /* @kind font */
  --lh-h4: 1.35;     /* @kind font */
  --ls-h4: -0.006em; /* @kind font */

  /* body */
  --fs-body-lg: 17px;   /* @kind font */
  --lh-body-lg: 1.55;   /* @kind font */
  --fs-body:    15px;   /* @kind font */
  --lh-body:    1.55;   /* @kind font */
  --fs-body-sm: 13px;   /* @kind font */
  --lh-body-sm: 1.5;    /* @kind font */
  --fs-caption: 12px;   /* @kind font */
  --lh-caption: 1.4;    /* @kind font */
  --ls-caption: 0.01em; /* @kind font */
  --fs-micro:   11px;   /* @kind font */
  --lh-micro:   1.35;   /* @kind font */
  --ls-micro:   0.06em; /* @kind font */

  /* numeric / money */
  --fs-num-xl: 48px; /* @kind font */
  --fs-num-lg: 32px; /* @kind font */
  --fs-num-md: 24px; /* @kind font */

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);  /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-press:    cubic-bezier(0.4, 0, 0.6, 1);    /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---------- Layout ---------- */
  --container-narrow: 720px;  /* @kind spacing */
  --container-base:   1120px; /* @kind spacing */
  --container-wide:   1440px; /* @kind spacing */
  --container-xwide:  1600px; /* @kind spacing */
}

/* ========== DARK MODE ========== */
[data-theme="dark"], .dark {
  --bg-canvas:   #141C3A;
  --bg-raised:   #141C3A;
  --bg-inset:    #141C3A;
  --bg-elevated: #1A2447;

  --fg-1: #F2FDFF;
  --fg-2: #C4B9DB;
  --fg-3: #8B84A3;
  --fg-4: #5B5570;
  --fg-accent: #A594C7;

  --shadow-light: rgba(70, 84, 140, 0.22);
  --shadow-dark:  rgba(6, 10, 24, 0.65);
  --shadow-dark-strong: rgba(6, 10, 24, 0.85);

  --border-1: rgba(196, 185, 219, 0.08);
  --border-2: rgba(196, 185, 219, 0.14);

  --success-soft: rgba(58, 134, 137, 0.2);
  --warning-soft: rgba(200, 138, 46, 0.2);
  --danger-soft:  rgba(198, 74, 91, 0.2);
  --info-soft:    rgba(86, 71, 135, 0.28);
}

/* ========== SEMANTIC TYPE CLASSES ========== */
body, .pf-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pf-display-xl { font: var(--fw-semibold) var(--fs-display-xl)/var(--lh-display-xl) var(--font-sans); letter-spacing: var(--ls-display-xl); }
.pf-display-lg { font: var(--fw-semibold) var(--fs-display-lg)/var(--lh-display-lg) var(--font-sans); letter-spacing: var(--ls-display-lg); }
.pf-display-md { font: var(--fw-semibold) var(--fs-display-md)/var(--lh-display-md) var(--font-sans); letter-spacing: var(--ls-display-md); }

.pf-h1 { font: var(--fw-semibold) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--ls-h1); }
.pf-h2 { font: var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); }
.pf-h3 { font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3); }
.pf-h4 { font: var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-sans); letter-spacing: var(--ls-h4); }

.pf-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.pf-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.pf-caption  { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.pf-micro    {
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}

.pf-num-xl { font-size: var(--fs-num-xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pf-num-lg { font-size: var(--fs-num-lg); font-weight: var(--fw-semibold); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.pf-num-md { font-size: var(--fs-num-md); font-weight: var(--fw-semibold); letter-spacing: -0.01em;  font-variant-numeric: tabular-nums; }

.pf-mono { font-family: var(--font-mono); font-feature-settings: "zero", "ss01"; }