/* ================================================================
   EraLedger — Design Tokens
   Single source of truth. Every page imports this file.
   Never hardcode a colour, size, or duration anywhere else.
   Derived from: wordmark navy #0B0E6B · lyre gold #D4A537
   Feel: Quiet Private Bank + Analytical Depth
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {

  /* ----------------------------------------------------------------
     Fonts
  ---------------------------------------------------------------- */
  --font-display : 'Cormorant Garamond', Georgia, serif;
  --font-body    : 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono    : 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ----------------------------------------------------------------
     Color — Navy
     Derived from brand wordmark (#0B0E6B)
  ---------------------------------------------------------------- */
  --navy-950 : #030417;
  --navy-900 : #070B3E;
  --navy-850 : #0B0E6B;   /* brand primary */
  --navy-800 : #0E1282;
  --navy-700 : #1624A8;
  --navy-600 : #2436C8;
  --navy-500 : #3A50DC;
  --navy-400 : #5A6EE8;
  --navy-300 : #8896F2;
  --navy-200 : #BCC5FA;
  --navy-100 : #DDE2FD;
  --navy-50  : #EEF1FF;

  /* ----------------------------------------------------------------
     Color — Gold
     Derived from lyre icon (~#D4A537)
  ---------------------------------------------------------------- */
  --gold-900 : #3A2900;
  --gold-700 : #7A5800;
  --gold-600 : #A37800;
  --gold-500 : #C49800;
  --gold-400 : #D4A537;   /* brand accent */
  --gold-300 : #E8C060;
  --gold-200 : #F5DC9C;
  --gold-100 : #FBF1D2;
  --gold-50  : #FEFAEE;

  /* ----------------------------------------------------------------
     Color — Neutral
     Warm undertone (navy-tinted, not cold grey)
  ---------------------------------------------------------------- */
  --neutral-950 : #0C0C10;
  --neutral-900 : #1A1A22;
  --neutral-800 : #2C2C38;
  --neutral-700 : #424250;
  --neutral-600 : #5A5A6A;
  --neutral-500 : #757585;
  --neutral-400 : #9898A6;
  --neutral-300 : #BBBBC8;
  --neutral-200 : #DCDCE6;
  --neutral-100 : #EEEEF4;
  --neutral-50  : #F7F7FA;
  --white       : #FAFAF8;   /* warm white — never pure #FFF in surfaces */

  /* ----------------------------------------------------------------
     Color — Semantic
  ---------------------------------------------------------------- */
  --color-success     : #2A7A50;
  --color-success-bg  : #EAF7F1;
  --color-success-text: #1A5235;

  --color-warning     : #A07010;
  --color-warning-bg  : #FDF6E3;
  --color-warning-text: #6B4A00;

  --color-error       : #B83030;
  --color-error-bg    : #FDECEC;
  --color-error-text  : #7A1E1E;

  --color-info        : var(--navy-700);
  --color-info-bg     : var(--navy-50);
  --color-info-text   : var(--navy-900);

  /* Financial data — always use these, never raw red/green */
  --color-gain  : #2A7A50;   /* income, positive returns */
  --color-loss  : #B83030;   /* expense, negative returns */
  --color-flat  : var(--neutral-500);

  /* ----------------------------------------------------------------
     Typography — Size scale (rem, 16px base)
  ---------------------------------------------------------------- */
  --text-xs   : 0.75rem;    /*  12px */
  --text-sm   : 0.875rem;   /*  14px */
  --text-base : 1rem;       /*  16px */
  --text-lg   : 1.125rem;   /*  18px */
  --text-xl   : 1.25rem;    /*  20px */
  --text-2xl  : 1.5rem;     /*  24px */
  --text-3xl  : 1.875rem;   /*  30px */
  --text-4xl  : 2.25rem;    /*  36px */
  --text-5xl  : 3rem;       /*  48px */
  --text-6xl  : 3.75rem;    /*  60px */
  --text-7xl  : 4.5rem;     /*  72px */

  /* ----------------------------------------------------------------
     Typography — Weight
  ---------------------------------------------------------------- */
  --weight-light    : 300;
  --weight-regular  : 400;
  --weight-medium   : 500;
  --weight-semibold : 600;
  --weight-bold     : 700;

  /* ----------------------------------------------------------------
     Typography — Line height
  ---------------------------------------------------------------- */
  --leading-none    : 1;
  --leading-tight   : 1.2;
  --leading-snug    : 1.35;
  --leading-normal  : 1.55;
  --leading-relaxed : 1.7;

  /* ----------------------------------------------------------------
     Typography — Letter spacing
  ---------------------------------------------------------------- */
  --tracking-tight   : -0.02em;
  --tracking-normal  :  0em;
  --tracking-wide    :  0.04em;
  --tracking-wider   :  0.08em;
  --tracking-widest  :  0.15em;

  /* ----------------------------------------------------------------
     Spacing — 4 px grid
  ---------------------------------------------------------------- */
  --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-12 : 48px;
  --space-16 : 64px;
  --space-20 : 80px;
  --space-24 : 96px;
  --space-32 : 128px;

  /* ----------------------------------------------------------------
     Border radius
  ---------------------------------------------------------------- */
  --radius-xs   :  2px;
  --radius-sm   :  4px;
  --radius-md   :  8px;
  --radius-lg   : 12px;
  --radius-xl   : 20px;
  --radius-2xl  : 32px;
  --radius-pill : 999px;

  /* ----------------------------------------------------------------
     Shadows (navy-tinted, not black-tinted)
  ---------------------------------------------------------------- */
  --shadow-xs  : 0 1px  2px rgba(7, 11, 62, 0.05);
  --shadow-sm  : 0 2px  8px rgba(7, 11, 62, 0.08);
  --shadow-md  : 0 4px 20px rgba(7, 11, 62, 0.10);
  --shadow-lg  : 0 8px 32px rgba(7, 11, 62, 0.14);
  --shadow-xl  : 0 16px 56px rgba(7, 11, 62, 0.18);
  --shadow-2xl : 0 32px 80px rgba(7, 11, 62, 0.24);

  /* ----------------------------------------------------------------
     Layout
  ---------------------------------------------------------------- */
  --nav-height     : 68px;
  --container-sm   : 640px;
  --container-md   : 768px;
  --container-lg   : 1024px;
  --container-xl   : 1200px;
  --container-2xl  : 1400px;
  --hero-content-w : 58%;   /* Revolut-pattern: content left, visual right */

  /* ----------------------------------------------------------------
     Motion
  ---------------------------------------------------------------- */
  --ease-out      : cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out   : cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring   : cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast   : 150ms;
  --duration-normal : 250ms;
  --duration-slow   : 400ms;
  --duration-slower : 600ms;

  /* ----------------------------------------------------------------
     Z-index scale
  ---------------------------------------------------------------- */
  --z-base    :   1;
  --z-raised  :  10;
  --z-overlay : 100;
  --z-nav     : 200;
  --z-modal   : 300;
  --z-toast   : 400;
}

/* ----------------------------------------------------------------
   Base reset & defaults
   (tokens.css owns this so every page gets it automatically)
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--neutral-900);
  background: var(--white);
}

img, video {
  display: block;
  max-width: 100%;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}