/* ═══════════════════════════════════════════════════════════════
   ELCARO v3 — design tokens
   One typeface. One ink. Green/red belong to money only.
   Grounds: noir (default) · light. html[data-theme] switches.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root, html[data-theme="noir"] {
  color-scheme: dark;

  --bg:      #0D0D0D;   /* page ground          */
  --bg-2:    #131312;   /* raised surface       */
  --bg-3:    #1A1A19;   /* higher surface       */
  --line:    rgba(255,255,255,.10);
  --line-2:  rgba(255,255,255,.17);
  --fill:    rgba(255,255,255,.06);  /* seg-control track   */

  --ink:     #F4F4F2;   /* primary text         */
  --ink-2:   #A3A3A0;   /* secondary text       */
  --ink-3:   #6E6E6B;   /* faint text           */
  --ink-4:   #4A4A48;   /* disabled             */

  --accent:  #F4F4F2;   /* filled controls      */
  --on-accent:#0D0D0D;  /* text on accent       */

  --green:   #00C468;
  --red:     #E45B5B;
  --green-tint: rgba(0,196,104,.13);
  --red-tint:   rgba(228,91,91,.13);

  --gold:    #C9A86A;   /* rare decorative (oracle/vip) */

  --shadow:  0 1px 2px rgba(0,0,0,.35);

  --grid-line: rgba(255,255,255,.022);
}

html[data-theme="light"] {
  color-scheme: light;

  --bg:      #FFFFFF;
  --bg-2:    #FAFAF9;
  --bg-3:    #F2F2F0;
  --line:    rgba(18,18,18,.09);
  --line-2:  rgba(18,18,18,.16);
  --fill:    rgba(18,18,18,.05);

  --ink:     #121212;
  --ink-2:   #656565;
  --ink-3:   #9B9B9B;
  --ink-4:   #C2C2BF;

  --accent:  #121212;
  --on-accent:#FFFFFF;

  --green:   #009D55;
  --red:     #D64545;
  --green-tint: rgba(0,157,85,.10);
  --red-tint:   rgba(214,69,69,.10);

  --gold:    #A8862F;

  --shadow:  0 1px 2px rgba(18,18,18,.06);

  --grid-line: transparent;
}

/* type + radius scale */
:root {
  --font: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-card: 22px;
  --r-sm:   14px;
  --r-pill: 999px;

  --pad-screen: 20px;

  /* type roles */
  --fs-hero:   72px;  /* one giant numeral per screen */
  --fs-title:  31px;  /* large screen title           */
  --fs-h3:     18px;  /* section heading              */
  --fs-body:   15px;
  --fs-sub:    13px;
  --fs-micro:  11px;  /* uppercase micro-label        */
}