@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* tokens/fonts.css */
/* ==========================================================================
   ASTRID — FONTS
   Display/UI: Sora (geometric grotesque — closest Google match to the
   custom ASTRID wordmark). Body: Manrope. Mono: JetBrains Mono for
   on-chain / network / data labels.
   NOTE: substituted from Google Fonts — see readme.md "Font substitution".
   ========================================================================== */

/* tokens/colors.css */
/* ==========================================================================
   ASTRID — COLOR TOKENS
   Black, white, electric teal. Institutional, high-contrast, restrained.
   ========================================================================== */

:root {
  /* ---- Brand core --------------------------------------------------------- */
  --astrid-black:      #000000;  /* true black — primary brand ground        */
  --astrid-white:      #FFFFFF;  /* true white                                */
  --astrid-teal:       #06E7DE;  /* electric teal — sampled from the logo dot */

  /* ---- Teal ramp (tints toward white, shades toward ink) ------------------ */
  --teal-50:   #E6FEFC;
  --teal-100:  #C2FBF7;
  --teal-200:  #8CF6EF;
  --teal-300:  #4DEFE5;
  --teal-400:  #06E7DE;   /* = --astrid-teal */
  --teal-500:  #05C6BF;   /* accessible teal for text/icons on white          */
  --teal-600:  #049A95;
  --teal-700:  #037571;
  --teal-800:  #024E4B;
  --teal-900:  #012B29;

  /* ---- Neutral ramp (warm-free, near-neutral grays on a black base) ------- */
  --ink-950:   #050506;   /* off-black surface, one step above pure black     */
  --ink-900:   #0B0C0D;
  --ink-850:   #121315;
  --ink-800:   #1A1C1F;   /* raised surface on dark                           */
  --ink-700:   #26292D;   /* hairline borders on dark                         */
  --ink-600:   #3A3E44;
  --ink-500:   #5A5F66;
  --ink-400:   #868C94;   /* muted text on dark                               */
  --ink-300:   #AEB4BC;
  --ink-200:   #D0D4D9;   /* hairline borders on light                        */
  --ink-100:   #E7E9EC;
  --ink-50:    #F4F5F6;   /* off-white surface                                */

  /* ---- Semantic status (used sparingly; teal is the hero) ----------------- */
  --signal-positive: #23C57E;
  --signal-negative: #FF5C5C;
  --signal-warning:  #F2B23E;

  /* ======================================================================== */
  /* SEMANTIC ALIASES — dark is the default Astrid canvas                     */
  /* ======================================================================== */

  /* Surfaces (dark theme = default) */
  --surface-page:     var(--astrid-black);
  --surface-raised:   var(--ink-900);
  --surface-card:     var(--ink-850);
  --surface-inset:    var(--ink-950);
  --surface-inverse:  var(--astrid-white);

  /* Text */
  --text-primary:     var(--astrid-white);
  --text-secondary:   var(--ink-300);
  --text-muted:       var(--ink-400);
  --text-accent:      var(--astrid-teal);
  --text-on-teal:     var(--astrid-black);
  --text-inverse:     var(--astrid-black);

  /* Borders */
  --border-hairline:  var(--ink-700);
  --border-strong:    var(--ink-600);
  --border-accent:    var(--astrid-teal);

  /* Accent */
  --accent:           var(--astrid-teal);
  --accent-hover:     var(--teal-300);
  --accent-press:     var(--teal-500);
  --focus-ring:       var(--teal-400);
}

/* ---- Light scope: opt-in via [data-theme="light"] ------------------------ */
[data-theme="light"] {
  --surface-page:     var(--astrid-white);
  --surface-raised:   var(--ink-50);
  --surface-card:     var(--astrid-white);
  --surface-inset:    var(--ink-50);
  --surface-inverse:  var(--astrid-black);

  --text-primary:     var(--astrid-black);
  --text-secondary:   var(--ink-600);
  --text-muted:       var(--ink-500);
  --text-accent:      var(--teal-600);
  --text-on-teal:     var(--astrid-black);
  --text-inverse:     var(--astrid-white);

  --border-hairline:  var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-accent:    var(--teal-500);

  --accent-hover:     var(--teal-500);
  --accent-press:     var(--teal-600);
}

/* tokens/typography.css */
/* ==========================================================================
   ASTRID — TYPOGRAPHY TOKENS
   Sora carries display + headings with tight tracking and set uppercase for
   eyebrows. Manrope handles body. JetBrains Mono flags data / network terms.
   ========================================================================== */

:root {
  /* ---- Families ----------------------------------------------------------- */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ------------------------------------------------------------ */
  --fw-regular:  400;  /* @kind other */
  --fw-medium:   500;  /* @kind other */
  --fw-semibold: 600;  /* @kind other */
  --fw-bold:     700;  /* @kind other */
  --fw-extra:    800;  /* @kind other */

  /* ---- Type scale (fluid-ready, rem) -------------------------------------- */
  --text-display-xl: 5.25rem;   /* 84px — hero statements                     */
  --text-display-l:  3.75rem;   /* 60px                                       */
  --text-display-m:  2.75rem;   /* 44px — section headers                     */
  --text-h1:         2.25rem;   /* 36px                                       */
  --text-h2:         1.75rem;   /* 28px                                       */
  --text-h3:         1.375rem;  /* 22px                                       */
  --text-h4:         1.125rem;  /* 18px                                       */
  --text-body-lg:    1.125rem;  /* 18px                                       */
  --text-body:       1rem;      /* 16px                                       */
  --text-body-sm:    0.875rem;  /* 14px                                       */
  --text-caption:    0.75rem;   /* 12px                                       */
  --text-eyebrow:    0.75rem;   /* 12px — uppercase, tracked mono/display     */

  /* ---- Line heights ------------------------------------------------------- */
  --leading-tight:   1.05;   /* display                                       */
  --leading-snug:    1.2;    /* headings                                      */
  --leading-normal:  1.5;    /* body                                          */
  --leading-relaxed: 1.65;   /* long-form body                                */

  /* ---- Letter spacing ----------------------------------------------------- */
  --tracking-tight:   -0.03em;  /* display / large headings                   */
  --tracking-snug:    -0.015em; /* headings                                   */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.18em;   /* uppercase eyebrows / labels                */
}

/* tokens/spacing.css */
/* ==========================================================================
   ASTRID — SPACING & LAYOUT TOKENS
   4px base grid. Generous, architectural spacing for the institutional feel.
   ========================================================================== */

:root {
  /* ---- Space scale (4px base) --------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-7:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-9:   6rem;      /* 96px */
  --space-10:  8rem;      /* 128px */

  /* ---- Layout ------------------------------------------------------------- */
  --container-max:   1280px;
  --container-wide:  1440px;
  --gutter:          var(--space-5);
  --section-pad-y:   var(--space-9);
}

/* tokens/effects.css */
/* ==========================================================================
   ASTRID — EFFECTS TOKENS
   Corners are near-square: this is engineering / infrastructure, not a
   consumer app. Shadows are subtle on light; on black we use hairline
   borders and faint teal glows instead of drop shadows.
   ========================================================================== */

:root {
  /* ---- Radii -------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;    /* default control / card radius                     */
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---- Border widths ------------------------------------------------------ */
  --border-thin:   1px;
  --border-medium: 1.5px;

  /* ---- Elevation (light contexts) ----------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(5, 6, 8, 0.08);
  --shadow-md: 0 4px 16px rgba(5, 6, 8, 0.10);
  --shadow-lg: 0 18px 48px rgba(5, 6, 8, 0.14);

  /* ---- Teal glow (dark contexts — hover / focus / hero accents) ----------- */
  --glow-teal-sm: 0 0 0 1px rgba(6, 231, 222, 0.35);
  --glow-teal-md: 0 0 24px rgba(6, 231, 222, 0.28);
  --glow-teal-lg: 0 0 60px rgba(6, 231, 222, 0.22);

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

  /* ---- Grid / texture ----------------------------------------------------- */
  --grid-line: rgba(255, 255, 255, 0.05);   /* faint network grid on black    */
}