/* ─────────────────────────────────────────────────────────────
   Seasons Design System — Colors & Type
   Premium light DeFi UI on Solana. $SEAS protocol.
   ───────────────────────────────────────────────────────────── */

/* ─── Fonts ──────────────────────────────────────────────────── */
@font-face {
  font-family: "Alcyone";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Alcyone-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Alcyone";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Alcyone-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Alcyone";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Alcyone-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Alcyone";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Alcyone-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Alcyone";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Alcyone-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Alcyone";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Alcyone-Bold.woff2") format("woff2");
}

:root {
  /* ─── Color primitives ───────────────────────────────────── */
  /* Brand purple — extracted from $SEAS logo */
  --purple-900: #2C0F8A;
  --purple-800: #3A0FA8;
  --purple-700: #4114C0;
  --purple-600: #541EF6;   /* Brand primary */
  --purple-500: #7A20F9;
  --purple-400: #5B4FF0;
  --purple-300: #A6B3F0;
  --purple-200: #C9C0F1;
  --purple-100: #E8DCFF;
  --purple-050: #F0EBFF;
  --purple-025: #FCF8FF;

  /* Brand green — secondary accent ($SEAS "let it grow") */
  --green-700: #6BC228;
  --green-600: #7DE032;
  --green-500: #8DFA44;     /* Primary green */
  --green-400: #A8FF6E;
  --green-100: #D4F1B8;

  /* Neutrals — warm cool greys, slightly lifted */
  --ink-900: #0E0E10;
  --ink-800: #1F1F22;
  --ink-700: #3B3B3D;       /* Body / heading default */
  --ink-600: #52525B;
  --ink-500: #6B6A6E;       /* Secondary text */
  --ink-400: #727272;
  --ink-350: #8A88A0;       /* Tertiary, helper text */
  --ink-300: #A8A8B0;
  --ink-200: #D9D9DD;
  --ink-150: #E8E8ED;
  --ink-100: #EFEFEF;
  --ink-075: #F5F6FC;
  --ink-050: #F8FAFF;       /* Page background */
  --ink-000: #FFFFFF;

  /* Status — semantic */
  --red-500: #E14848;
  --amber-500: #F2B84B;
  --info-500: #5B7BFF;

  /* ─── Semantic color tokens ──────────────────────────────── */
  /* Surfaces */
  --bg-page:        var(--ink-050);   /* primary page */
  --bg-surface:     var(--ink-000);   /* cards, sheets */
  --bg-surface-alt: #FCF8FF;          /* tinted card surface */
  --bg-surface-soft:var(--ink-075);   /* subtle inset / table-row */
  --bg-muted:       var(--ink-100);   /* dividers, chip rest */
  --bg-footer:      #E4E6FF;          /* lavender footer band */
  --bg-elevated:    var(--ink-000);   /* nav over page */
  --bg-tag-purple:  var(--purple-100);
  --bg-tag-green:   var(--green-100);

  /* Text */
  --text-primary:   var(--ink-700);   /* default body, headings */
  --text-secondary: var(--ink-500);   /* paragraphs, sub */
  --text-tertiary:  var(--ink-350);   /* helper, placeholder */
  --text-nav:       var(--ink-600);
  --text-purple:    #4141A1;          /* purple-on-light text */
  --text-on-purple: #F8F9FF;
  --text-on-green:  var(--ink-700);
  --text-inverted:  var(--ink-000);
  --text-link:      var(--purple-600);
  --text-danger:    var(--red-500);

  /* Borders */
  --border-default: var(--ink-150);   /* card outline */
  --border-soft:    var(--ink-100);   /* subtle */
  --border-pill:    var(--ink-200);   /* pill/chip outline */
  --border-strong:  var(--ink-300);
  --border-purple:  var(--purple-600);
  --border-danger:  var(--red-500);
  --border-glass-h: rgba(122,32,249,0.35); /* horizontal glass inset */
  --border-on-light: rgba(255,255,255,1);  /* nav over page */

  /* Brand accents */
  --accent-primary:   var(--purple-600);
  --accent-primary-hover: #4515D0;
  --accent-primary-soft:  rgba(84,30,246,0.10);
  --accent-secondary: var(--green-500);
  --accent-secondary-hover: var(--green-600);

  /* Focus */
  --focus-ring: 0 0 0 4px rgba(84,30,246,0.10);

  /* ─── Gradients ──────────────────────────────────────────── */
  --grad-hero-purple:   linear-gradient(180deg, #7A20F9 0%, #541EF6 100%);
  --grad-result-card:   linear-gradient(135deg, #5B4FF0 0%, #4528E2 100%);
  --grad-partner-card:  linear-gradient(180deg, #AEBCEE 0%, #EEE1F2 100%);
  --grad-how-it-works:  linear-gradient(197.83deg, #E4DBF1 0%, #C1C7EF 100%);
  --grad-accent-green:  linear-gradient(180deg, #A8FF6E 0%, #8DFA44 100%);
  --grad-glass-frost:   linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%);
  --grad-ambient-glow:  radial-gradient(closest-side, rgba(99,110,255,0.22), rgba(99,110,255,0));
  --grad-logo-mark:     linear-gradient(135deg, #7A20F9 0%, #541EF6 100%);

  /* ─── Radii ──────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-card: 24px;
  --radius-card-lg: 40px;
  --radius-pill: 100px;
  --radius-nav:  140px;
  --radius-circle: 999px;

  /* ─── Spacing — 4px base scale ───────────────────────────── */
  --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-15: 60px;
  --space-20: 80px;
  --space-30: 120px;

  /* ─── Shadows ────────────────────────────────────────────── */
  /* Outer */
  --shadow-nav:     0px 9px 20px 0px rgba(41,13,79,0.10);
  --shadow-stats:   0px 12px 32px -8px rgba(41,13,79,0.12),
                    0px 2px 6px 0px rgba(41,13,79,0.04);
  --shadow-card:    0px 1px 2px rgba(20,20,40,0.04), 0px 8px 24px -12px rgba(41,13,79,0.08);
  --shadow-modal:   0px 24px 48px -12px rgba(0,0,0,0.20);
  --shadow-button-primary: 0px 8px 24px -4px rgba(84,30,246,0.25);

  /* Glass — inner highlights / pressure */
  --shadow-glass-inset:
    inset 0.5px 0 0 rgba(122,32,249,0.35),
    inset -0.5px 0 0 rgba(122,32,249,0.35),
    inset 0 -2px 2px rgba(255,255,255,0.9),
    inset 0 2px 2px #fff;

  /* ─── Typography ─────────────────────────────────────────── */
  --font-display: "Alcyone", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Alcyone", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Type scale (px) */
  --fs-display:  64px;   /* hero */
  --fs-h1:       44px;   /* heading L */
  --fs-h2:       32px;   /* heading M */
  --fs-h3:       24px;   /* heading S */
  --fs-h4:       22px;   /* card title / modal */
  --fs-body-lg:  18px;
  --fs-body-md:  16px;
  --fs-body-sm:  14px;
  --fs-overline: 14px;
  --fs-caption:  12px;
  --fs-mini:     11px;

  /* Weights */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Tracking */
  --ls-tight:   -1px;     /* display headings */
  --ls-normal:  0;
  --ls-wide:    0.5px;    /* small caps overline */
  --ls-wider:   1px;      /* full overline */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ─── Semantic typography helpers ──────────────────────────── */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--text-primary);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.15;
  color: var(--text-primary);
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}
.t-body-md {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-md);
  line-height: 1.5;
  color: var(--text-secondary);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}
.t-overline {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  line-height: 1;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-primary);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: 1.3;
  color: var(--text-tertiary);
}
.t-mini {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-mini);
  line-height: 1.2;
  color: var(--text-tertiary);
}

/* element defaults */
html, body { color: var(--text-primary); font-family: var(--font-body); background: var(--bg-page); }
h1 { font: var(--fw-medium) var(--fs-h1)/1 var(--font-display); letter-spacing: var(--ls-tight); color: var(--text-primary); margin: 0; }
h2 { font: var(--fw-bold) var(--fs-h2)/1.05 var(--font-display); letter-spacing: -0.5px; color: var(--text-primary); margin: 0; }
h3 { font: var(--fw-bold) var(--fs-h3)/1.1 var(--font-display); color: var(--text-primary); margin: 0; }
h4 { font: var(--fw-bold) var(--fs-h4)/1.15 var(--font-display); color: var(--text-primary); margin: 0; }
p  { font: var(--fw-regular) var(--fs-body-md)/1.5 var(--font-body); color: var(--text-secondary); margin: 0; }
small { font-size: var(--fs-caption); color: var(--text-tertiary); }
code { font-family: var(--font-mono); font-size: 0.9em; }