/* ============================================================
 * AIMO DESIGN SYSTEM — Colors & Type
 * The single source of truth for visual foundations.
 * ============================================================ */

/* ---------- Fonts ------------------------------------------- */

/* Altone — display / headings (Bold, ExtraBold, Heavy) */
@font-face {
  font-family: "Altone";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/altone/Altone-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Altone";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/altone/Altone-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Altone";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/altone/Altone-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Altone";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/altone/Altone-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Altone";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/altone/Altone-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Altone";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/altone/Altone-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Altone";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/altone/Altone-Heavy.ttf") format("truetype");
}

/* Be Vietnam Pro — body, UI, CTAs */
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/bevietnampro/BeVietnamPro-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/bevietnampro/BeVietnamPro-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/bevietnampro/BeVietnamPro-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/bevietnampro/BeVietnamPro-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/bevietnampro/BeVietnamPro-Bold.woff2") format("woff2");
}

:root {
  /* ============== BRAND COLORS (named) ==================== */
  --aimo-acid-green:    #A7F932;  /* primary accent / CTA */
  --aimo-black-bean:    #06160D;  /* primary background, darkest */
  --aimo-gable-green:   #143A25;  /* surface raised, deep accent */
  --aimo-mineral-green: #48674C;  /* tertiary, muted accent */
  --aimo-pearl-bush:    #DEDEDE;  /* primary text on dark */
  --aimo-white:         #FFFFFF;
  --aimo-black:         #000000;

  /* tints + shades derived from the core palette ---------------- */
  --aimo-acid-green-12:  rgba(167, 249, 50, 0.12);
  --aimo-acid-green-20:  rgba(167, 249, 50, 0.20);
  --aimo-acid-green-40:  rgba(167, 249, 50, 0.40);
  --aimo-acid-green-dim: #82C625;  /* darker hover / pressed */
  --aimo-acid-green-soft:#E9FFC9;

  --aimo-mineral-12:     rgba(72, 103, 76, 0.12);
  --aimo-mineral-24:     rgba(72, 103, 76, 0.24);
  --aimo-mineral-40:     rgba(72, 103, 76, 0.40);

  --aimo-gable-60:       rgba(20, 58, 37, 0.60);
  --aimo-gable-80:       rgba(20, 58, 37, 0.80);

  --aimo-pearl-bush-60:  rgba(222, 222, 222, 0.60);
  --aimo-pearl-bush-40:  rgba(222, 222, 222, 0.40);
  --aimo-pearl-bush-12:  rgba(222, 222, 222, 0.12);
  --aimo-pearl-bush-06:  rgba(222, 222, 222, 0.06);

  /* Semantic system status colors --------------------------- */
  --aimo-success: #A7F932;          /* gains, profits, confirmations */
  --aimo-success-dim: rgba(167, 249, 50, 0.16);
  --aimo-danger:  #FF5C5C;          /* losses, errors, destructive */
  --aimo-danger-dim: rgba(255, 92, 92, 0.16);
  --aimo-warning: #F5C84A;          /* warnings, pending */
  --aimo-warning-dim: rgba(245, 200, 74, 0.16);
  --aimo-info:    #6FC3FF;          /* neutral info */
  --aimo-info-dim: rgba(111, 195, 255, 0.16);

  /* ============== SEMANTIC TOKENS (use these) ============= */
  /* surfaces */
  --bg:           var(--aimo-black-bean);        /* canvas */
  --bg-1:         #0B1F13;                       /* raised card on canvas */
  --bg-2:         var(--aimo-gable-green);       /* second elevation */
  --bg-3:         #1B4E33;                       /* highest elevation */
  --bg-overlay:   rgba(6, 22, 13, 0.72);         /* modal scrim */
  --bg-glass:     rgba(20, 58, 37, 0.48);        /* glass-morphism cards */
  --bg-glass-low: rgba(222, 222, 222, 0.06);     /* glass on dark, neutral */

  /* borders / hairlines */
  --border:       rgba(222, 222, 222, 0.10);
  --border-strong:rgba(222, 222, 222, 0.18);
  --border-accent:var(--aimo-acid-green-40);

  /* foreground */
  --fg:           var(--aimo-pearl-bush);        /* primary text */
  --fg-1:         #FFFFFF;                       /* strongest text / numbers */
  --fg-2:         rgba(222, 222, 222, 0.72);     /* secondary text */
  --fg-3:         rgba(222, 222, 222, 0.48);     /* tertiary / placeholder */
  --fg-4:         rgba(222, 222, 222, 0.28);     /* disabled / dividers in text */
  --fg-on-acid:   var(--aimo-black-bean);        /* text on acid green */
  --fg-on-pearl:  var(--aimo-black-bean);        /* text on light bg */

  /* accents */
  --accent:        var(--aimo-acid-green);
  --accent-hover:  #B7FF55;
  --accent-press:  var(--aimo-acid-green-dim);
  --accent-fg:     var(--aimo-black-bean);

  /* status semantic shortcuts */
  --positive:      var(--aimo-success);
  --negative:      var(--aimo-danger);

  /* ============== TYPE ===================================== */
  --font-display:  "Altone", "Inter", system-ui, sans-serif;
  --font-body:     "Be Vietnam Pro", "Inter", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale (px-based for clarity) ------------------------ */
  --fs-display-xl: 88px;  /* hero marketing */
  --fs-display-l:  64px;
  --fs-display-m:  48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-micro:      11px;
  --fs-number-xl:  56px;  /* big balances, tabular */
  --fs-number-l:   32px;

  /* line-heights ------------------------------------------- */
  --lh-tight: 1.04;
  --lh-snug:  1.16;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  /* tracking ---------------------------------------------- */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-base:   0;
  --tr-loose:  0.02em;
  --tr-caps:   0.08em;

  /* ============== RADII =================================== */
  --radius-xs: 6px;     /* chips */
  --radius-sm: 10px;    /* small buttons */
  --radius-md: 14px;    /* inputs */
  --radius-lg: 20px;    /* cards */
  --radius-xl: 28px;    /* hero cards */
  --radius-2xl:40px;
  --radius-pill: 999px;

  /* ============== SPACING ================================= */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ============== SHADOWS / GLOW ========================== */
  --shadow-card:    0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lifted:  0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 64px -16px rgba(0,0,0,0.55);
  --shadow-popover: 0 16px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  --glow-accent:    0 0 0 4px var(--aimo-acid-green-20), 0 8px 32px var(--aimo-acid-green-20);
  --glow-accent-sm: 0 0 0 2px var(--aimo-acid-green-20), 0 4px 16px var(--aimo-acid-green-20);

  /* ============== MOTION ================================== */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.36, 0.64, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;
  --dur-slow:     260ms;
  --dur-grand:    400ms;

  /* ============== Z ===================================== */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}

/* ============================================================
 * SEMANTIC ELEMENT STYLES — drop-in defaults
 * ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300; /* Be Vietnam LIGHT for body, per brand guidelines */
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Per brand guidelines (p.17, p.19):
   - Headings  -> Altone Bold, Acid Green
   - Sub-heads -> Altone Medium, Pearl Bush
   - Body      -> Be Vietnam Light, Pearl Bush */
h1, h2, h3, h4, .display, .display-l, .display-m {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

.display-xl { font-size: var(--fs-display-xl); font-weight: 800; }
.display-l  { font-size: var(--fs-display-l);  font-weight: 800; }
.display-m  { font-size: var(--fs-display-m);  font-weight: 800; }
h1, .h1     { font-size: var(--fs-h1); font-weight: 700; }
h2, .h2     { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); }
/* Sub-headings: Altone Medium, Pearl Bush */
h3, .h3, .subhead { font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); color: var(--fg-1); }
h4, .h4     { font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-snug); color: var(--fg-1); letter-spacing: var(--tr-snug); }

.body-lg    { font-size: var(--fs-body-lg); line-height: var(--lh-base); font-weight: 300; }
.body       { font-size: var(--fs-body); line-height: var(--lh-base); font-weight: 300; }
.body-sm    { font-size: var(--fs-body-sm); line-height: var(--lh-base); font-weight: 300; color: var(--fg-2); }
.caption    { font-size: var(--fs-caption); line-height: 1.3; color: var(--fg-2); letter-spacing: var(--tr-loose); }
.eyebrow    { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); font-weight: 600; }

/* Numbers use Altone Medium (500) with slightly looser tracking for legibility
   on big balances — heavy weights crowd the tabular figures. */
.number     { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; color: var(--fg-1); font-weight: 500; }
.number-xl  { font-size: var(--fs-number-xl); font-weight: 500; letter-spacing: -0.005em; }
.number-l   { font-size: var(--fs-number-l); font-weight: 500; letter-spacing: 0; }

p           { margin: 0 0 var(--space-3); color: var(--fg); }
a           { color: var(--accent); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); }
a:hover     { opacity: 0.8; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--accent); color: var(--accent-fg); }

/* utility text colors */
.fg   { color: var(--fg); }
.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.accent { color: var(--accent); }
.positive { color: var(--positive); }
.negative { color: var(--negative); }