/* ============================================================
   PolyPhaze — Colors & Type
   Single source of truth for CSS tokens.
   ============================================================ */

/* Fonts via Google Fonts (Archivo substitutes for Neuething Sans Expanded) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');

:root {
  /* ---------- PRIMARY COLORS ---------- */
  --pp-light-blue:   #17B9F9;  /* main CTAs, logo, light surfaces */
  --pp-navy:         #070F41;  /* primary dark, headings on light */
  --pp-snow:         #EBEBEB;  /* light neutral */
  --pp-white:        #FFFFFF;

  /* ---------- SECONDARY COLORS ---------- */
  --pp-blue:         #006AF9;  /* deeper blue */
  --pp-teal:         #1ACCCA;  /* teal accent */
  --pp-green:        #4BE87B;  /* highlights, tags, success */
  --pp-yellow:       #F4FF20;  /* highlights, tags */
  --pp-black-text:   #101010;

  /* ---------- TONES / SCALES ----------
     Naming: <hue>-<step>. 00 lightest → 70 darkest. */
  --pp-lightblue-00: #E6FFFF;
  --pp-lightblue-10: #D1F2FF;
  --pp-lightblue-20: #99C5FF;
  --pp-lightblue-30: #17B9F9;
  --pp-lightblue-40: #076387;

  --pp-teal-20:      #99E5E4;
  --pp-teal-30:      #1ACCCA;
  --pp-teal-40:      #1A7371;

  --pp-blue-30:      #4C97FC;
  --pp-blue-40:      #006AF9;
  --pp-blue-50:      #1023A0;

  --pp-navy-50:      #070F41;

  --pp-green-50:     #F6FFF5;
  --pp-green-60:     #4BE87B;
  --pp-green-70:     #2B9923;

  --pp-yellow-50:    #FEFFE6;
  --pp-yellow-60:    #F9FF83;
  --pp-yellow-70:    #F4FF20;

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  /* Foreground */
  --fg-primary:      var(--pp-navy);        /* default body text on light */
  --fg-secondary:    #3A4566;               /* subdued navy */
  --fg-tertiary:     #6B7490;               /* meta, captions */
  --fg-muted:        #A0A6B8;
  --fg-on-dark:      #FFFFFF;
  --fg-on-dark-2:    #B8C2E0;               /* secondary on navy */
  --fg-accent:       var(--pp-blue);

  /* Background / surface */
  --bg-page:         #FFFFFF;
  --bg-surface:      #F7F9FC;               /* card / section tint on white */
  --bg-surface-2:    var(--pp-snow);
  --bg-dark:         var(--pp-navy);
  --bg-dark-2:       #0E1752;               /* next-step dark surface */
  --bg-brand:        var(--pp-light-blue);
  --bg-brand-soft:   var(--pp-lightblue-10);

  /* Borders */
  --border-subtle:   rgba(7, 15, 65, 0.08);
  --border-default:  rgba(7, 15, 65, 0.14);
  --border-strong:   rgba(7, 15, 65, 0.24);
  --border-on-dark:  rgba(255, 255, 255, 0.14);

  /* States */
  --state-success:   var(--pp-green-70);
  --state-success-bg:var(--pp-green-50);
  --state-warning:   #C48A00;
  --state-warning-bg:var(--pp-yellow-50);
  --state-danger:    #C8242D;
  --state-danger-bg: #FDECEC;
  --state-info:      var(--pp-blue);
  --state-info-bg:   var(--pp-lightblue-10);

  /* Focus ring */
  --focus-ring:      0 0 0 3px rgba(23, 185, 249, 0.45);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo', 'Neuething Sans Expanded', 'Neuething Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Display uses expanded weight via font-stretch */
  --display-stretch: 125%;

  /* ---------- TYPE SCALE (rem; 1rem = 16px) ---------- */
  --fs-display-xl: 5.5rem;  /* 88 */
  --fs-display-l:  4rem;    /* 64 */
  --fs-display-m:  3rem;    /* 48 */
  --fs-h1:         2.5rem;  /* 40 */
  --fs-h2:         2rem;    /* 32 */
  --fs-h3:         1.5rem;  /* 24 */
  --fs-h4:         1.25rem; /* 20 */
  --fs-body-l:     1.125rem;/* 18 */
  --fs-body:       1rem;    /* 16 */
  --fs-body-s:     0.875rem;/* 14 */
  --fs-caption:    0.75rem; /* 12 */

  --lh-tight:      1.05;
  --lh-display:    1.08;
  --lh-heading:    1.2;
  --lh-body:       1.55;
  --lh-loose:      1.7;

  --ls-display:    -0.02em;
  --ls-heading:    -0.01em;
  --ls-body:       0;
  --ls-eyebrow:    0.12em;   /* uppercase eyebrow */

  /* ---------- SPACING (4px scale) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* ---------- RADII ---------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;
  /* Brand-specific hexagon corner radius — very subtle on hex-framed surfaces */
  --radius-hex: 2px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(7, 15, 65, 0.06);
  --shadow-sm: 0 1px 3px rgba(7, 15, 65, 0.08), 0 1px 2px rgba(7, 15, 65, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(7, 15, 65, 0.10), 0 2px 4px rgba(7, 15, 65, 0.05);
  --shadow-lg: 0 16px 40px -12px rgba(7, 15, 65, 0.18), 0 4px 8px rgba(7, 15, 65, 0.06);
  --shadow-xl: 0 28px 64px -18px rgba(7, 15, 65, 0.28);
  --shadow-brand: 0 10px 30px -8px rgba(23, 185, 249, 0.45);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---------- MOTION ---------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------- LAYOUT ---------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}

/* ============================================================
   SEMANTIC CLASSES — apply directly or use @extend-ish pattern
   ============================================================ */

/* Display / headline classes use Archivo with expanded stretch. */
.pp-display-xl,
.pp-display-l,
.pp-display-m,
.pp-h1,
.pp-h2,
.pp-h3,
.pp-h4 {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--fg-primary);
  text-wrap: balance;
}

.pp-display-xl { font-size: var(--fs-display-xl); font-weight: 900; line-height: var(--lh-tight); }
.pp-display-l  { font-size: var(--fs-display-l);  font-weight: 900; line-height: var(--lh-tight); }
.pp-display-m  { font-size: var(--fs-display-m);  font-weight: 900; }
.pp-h1         { font-size: var(--fs-h1);         font-weight: 800; }
.pp-h2         { font-size: var(--fs-h2);         font-weight: 800; }
.pp-h3         { font-size: var(--fs-h3);         font-weight: 700; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.pp-h4         { font-size: var(--fs-h4);         font-weight: 700; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }

/* Body uses Inter */
.pp-body-l, .pp-body, .pp-body-s, .pp-caption, .pp-eyebrow {
  font-family: var(--font-body);
  color: var(--fg-primary);
}
.pp-body-l { font-size: var(--fs-body-l); line-height: var(--lh-body); font-weight: 400; }
.pp-body   { font-size: var(--fs-body);   line-height: var(--lh-body); font-weight: 400; }
.pp-body-s { font-size: var(--fs-body-s); line-height: var(--lh-body); font-weight: 400; }
.pp-caption{ font-size: var(--fs-caption);line-height: var(--lh-body); font-weight: 500; color: var(--fg-tertiary); }
.pp-eyebrow{
  font-size: var(--fs-caption);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  font-family: var(--font-display);
}

.pp-mono { font-family: var(--font-mono); font-size: var(--fs-body-s); }

/* Utility link */
.pp-link {
  color: var(--pp-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.pp-link:hover { color: var(--pp-blue-50); }

/* Dark surface overrides */
.pp-on-dark { color: var(--fg-on-dark); }
.pp-on-dark .pp-caption,
.pp-on-dark.pp-caption { color: var(--fg-on-dark-2); }
.pp-on-dark .pp-eyebrow,
.pp-on-dark.pp-eyebrow { color: var(--pp-teal); }

/* Selection */
::selection { background: var(--pp-light-blue); color: var(--pp-navy); }