/* ============================================================================
   SendIt — Colors & Type
   ----------------------------------------------------------------------------
   Single source of truth for color tokens, type scale, and semantic styles.
   Import this file at the top of any HTML/JSX preview.

   <link rel="stylesheet" href="../colors_and_type.css">

   Sections:
     1. Font imports
     2. Color tokens (raw palette + semantic)
     3. Type tokens (families, sizes, weights, line-heights)
     4. Radius / shadow / spacing
     5. Semantic element styles (h1, p, etc)
     6. Utility classes
   ========================================================================= */

/* 1. FONTS ---------------------------------------------------------------- */
/* General Sans — the workhorse. A geometric humanist grotesk from
   Indian Type Foundry. Warm, confident, slightly less neutral than Inter.
   Bonus: Indian foundry, fitting for the spearhead market. */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap');

/* JetBrains Mono — for numerics, balances, ticker symbols, codes. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Fraunces is intentionally NOT used — too editorial / too tropy.
   We rely on weight + size contrast in General Sans for hierarchy. */


/* 2. COLOR TOKENS --------------------------------------------------------- */
:root {
  /* ---- Raw palette ---- */

  /* Ink — primary brand surface (from the logo background).
     A deep navy with a hint of blue, never pure black. */
  --ink-900: #0B1126;   /* logo background, hero surfaces */
  --ink-800: #131A33;   /* card on ink */
  --ink-700: #1E2647;   /* raised on ink */
  --ink-600: #2B345C;   /* hairline on ink */
  --ink-500: #4A547A;   /* muted text on ink */
  --ink-400: #7C849F;   /* tertiary text */
  --ink-300: #B0B6C8;
  --ink-200: #D6D9E2;
  --ink-100: #ECEEF3;
  --ink-50:  #F7F8FA;   /* page bg, light mode */
  --ink-0:   #FFFFFF;

  /* Coral — the brand accent. Warm, optimistic, not corporate.
     Reads as "go", "send", "primary action". Distinct from
     Revolut blue, Wise green, Cash App green. */
  --coral-900: #5C1A12;
  --coral-700: #B8362A;
  --coral-600: #E04332;
  --coral-500: #FF5B47;  /* PRIMARY accent */
  --coral-400: #FF7A6A;
  --coral-300: #FFA396;
  --coral-200: #FFCEC6;
  --coral-100: #FFE7E2;
  --coral-50:  #FFF4F1;

  /* Sand — secondary warm neutral. Used for warmer light surfaces,
     to lift the design out of "blue tech" territory. */
  --sand-500: #C9A77D;
  --sand-300: #E8D5B7;
  --sand-200: #F2E6D3;
  --sand-100: #F8F1E5;
  --sand-50:  #FCF8F0;

  /* Mint — positive / received / up. Calmer than typical fintech green. */
  --mint-700: #0F6B4F;
  --mint-500: #1FA77A;
  --mint-300: #6DD4AE;
  --mint-100: #DBF3E8;

  /* Amber — caution / pending. */
  --amber-700: #8A5A00;
  --amber-500: #E8A21A;
  --amber-100: #FCEFCC;

  /* Crimson — destructive / down. Distinct from coral by being deeper/redder. */
  --crimson-700: #8A1F1F;
  --crimson-500: #D43838;
  --crimson-100: #FBE2E2;

  /* Sky — informational; used sparingly. */
  --sky-700: #155EAB;
  --sky-500: #2D8AE8;
  --sky-100: #DBEBFB;

  /* ---- Semantic tokens (light mode default) ---- */
  --bg:           var(--ink-50);
  --bg-elevated:  var(--ink-0);
  --bg-sunken:    var(--ink-100);
  --bg-warm:      var(--sand-50);     /* alt page bg for marketing */
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-on-ink:    var(--ink-0);
  --fg-on-coral:  var(--ink-0);
  --fg-inverse:   var(--ink-0);

  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --border-on-ink:var(--ink-700);

  --accent:        var(--coral-500);
  --accent-hover:  var(--coral-600);
  --accent-press:  var(--coral-700);
  --accent-soft:   var(--coral-100);
  --on-accent:     var(--ink-0);

  --positive:     var(--mint-500);
  --positive-fg:  var(--mint-700);
  --positive-bg:  var(--mint-100);
  --negative:     var(--crimson-500);
  --negative-fg:  var(--crimson-700);
  --negative-bg:  var(--crimson-100);
  --pending:      var(--amber-500);
  --pending-fg:   var(--amber-700);
  --pending-bg:   var(--amber-100);
  --info:         var(--sky-500);
  --info-fg:      var(--sky-700);
  --info-bg:      var(--sky-100);
}

/* Dark surface overrides — apply via class or attribute, NOT auto.
   Use for hero sections, app dashboards on dark, etc. */
[data-surface="ink"], .on-ink {
  --bg:           var(--ink-900);
  --bg-elevated:  var(--ink-800);
  --bg-sunken:    var(--ink-900);
  --bg-warm:      var(--ink-800);
  --bg-inverse:   var(--ink-50);

  --fg:           var(--ink-0);
  --fg-muted:     var(--ink-300);
  --fg-subtle:    var(--ink-400);
  --fg-on-ink:    var(--ink-0);
  --fg-inverse:   var(--ink-900);

  --border:       var(--ink-700);
  --border-strong:var(--ink-600);

  color: var(--fg);
  background: var(--bg);
}


/* 3. TYPE TOKENS ---------------------------------------------------------- */
:root {
  --font-display: 'General Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'General Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* A confident type scale. Bigger jumps at the top for impact. */
  --t-display-xl: 76px;     /* hero headlines, marketing */
  --t-display-lg: 56px;
  --t-display-md: 40px;
  --t-h1:         32px;
  --t-h2:         24px;
  --t-h3:         20px;
  --t-body-lg:    18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    13px;
  --t-micro:      11px;     /* labels, eyebrows */

  /* Weights — General Sans skews narrow, so we use 600/700 freely. */
  --w-thin: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Line heights */
  --lh-tight: 1.05;     /* display */
  --lh-snug:  1.15;     /* headings */
  --lh-base:  1.45;     /* body */
  --lh-loose: 1.6;      /* long-form */

  /* Letter spacing — general sans likes a touch of negative tracking on display */
  --ls-display: -0.02em;
  --ls-heading: -0.015em;
  --ls-body:    0;
  --ls-eyebrow: 0.08em;
}


/* 4. RADIUS / SHADOW / SPACING ------------------------------------------- */
:root {
  /* Radii — generous but not pillowy. Cards are 16px; pills are full. */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;       /* cards */
  --r-xl: 28px;       /* hero cards, sheets */
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Shadows — soft, low-contrast, never harsh. Two-step elevation. */
  --shadow-xs: 0 1px 2px rgba(11, 17, 38, 0.04);
  --shadow-sm: 0 2px 6px rgba(11, 17, 38, 0.06), 0 1px 2px rgba(11, 17, 38, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 17, 38, 0.08), 0 2px 6px rgba(11, 17, 38, 0.04);
  --shadow-lg: 0 24px 48px rgba(11, 17, 38, 0.12), 0 4px 12px rgba(11, 17, 38, 0.06);
  --shadow-coral: 0 12px 32px rgba(255, 91, 71, 0.32);

  /* Spacing — 4px base, then 8px steps. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 80px;
  --s-11: 120px;

  /* Motion — most things are quick and confident, never bouncy. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}


/* 5. SEMANTIC ELEMENT STYLES --------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}
h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}
h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
}

.display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.display-xl { font-size: var(--t-display-xl); }
.display-lg { font-size: var(--t-display-lg); }
.display-md { font-size: var(--t-display-md); }

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }

.mono, code, kbd {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.numeric {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }


/* 6. UTILITY CLASSES ----------------------------------------------------- */
.surface         { background: var(--bg-elevated); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.surface-flat    { background: var(--bg-elevated); border-radius: var(--r-lg); border: 1px solid var(--border); }
.surface-warm    { background: var(--bg-warm); border-radius: var(--r-lg); }
.surface-ink     { background: var(--ink-900); color: var(--ink-0); border-radius: var(--r-lg); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  background: var(--bg-sunken);
  color: var(--fg);
}

/* Focus — accessible and on-brand */
:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

* { box-sizing: border-box; }