/* ==========================================================================
   AVENLEO — DESIGN TOKENS
   ==========================================================================
   The single source of truth. Raw scales are theme-independent; the semantic
   aliases below them are what every component consumes, and they are the only
   thing a theme overrides.

   The rules this file encodes
   ---------------------------
   1. NEUTRALS CARRY THE PRODUCT. Nine surfaces in every ten are ink and paper.
      Colour is a signal, not a personality — it marks the one action worth
      taking and the one number worth reading, and stops there.

   2. ONE TYPEFACE. Headings, labels, figures and buttons are all Inter,
      separated by weight, size and tracking rather than by a second family.
      Two display faces fighting each other is the loudest possible tell that
      nobody decided anything.

   3. FLAT SURFACES, HAIRLINE EDGES. There is no gradient token any more and no
      glow token any more. Depth comes from a 1px border and, where something
      genuinely floats, a shadow you have to look for. A card that glows is a
      card that is asking for attention it has not earned.

   4. TIGHT GEOMETRY. Radii top out at 16px on a modal. Large radii read as
      friendly and consumer; small ones read as precise, which is the register a
      product that holds somebody's money should be in.

   5. RESTRAINED MOTION. Nothing loops. Nothing pulses. Transitions are 120–200ms
      and exist to make a state change legible, not to be noticed.
   ========================================================================== */

/* ============================================================================
   THE TYPEFACE, SERVED FROM HERE
   ----------------------------------------------------------------------------
   Inter used to come from fonts.googleapis.com, which cost every visitor two
   extra origins before a word could be drawn: a DNS lookup, a TCP handshake and
   a TLS negotiation for the stylesheet host, then the same again for the font
   host, then the font itself — four round trips on a chain, on servers we do
   not run, from a country that is a long way from all of them.

   It is two files on our own domain now, already-connected and already-warm,
   and the markup preloads the one every page needs. Same face, same rendering,
   several hundred milliseconds earlier on a phone.

   Two subsets rather than one, and the second is not optional: the Naira sign
   (U+20A6) lives in latin-ext, and this product prints prices in Naira. The
   browser fetches it only on a page that actually shows one — that is what
   `unicode-range` is for — so nobody pays 85 KB for a glyph they never see.

   One file covers 400–700 because it is a variable font. Eleven static weights
   were what this replaced.
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* THE NAIRA SIGN, on its own, and it earns its own file.
   ----------------------------------------------------------------------------
   ₦ is U+20A6. It is not in the latin subset above — that file has $, € and the
   punctuation, but not this — and it sits inside `U+20A0-20AB`, which belongs to
   the extended subset below. So the moment a Naira member saw a balance, the
   browser fetched 83 KB of extended Latin to draw one glyph: measured, a
   workspace load went from 142 KB to 225 KB, a 58% penalty falling on the
   largest group of members this product has.

   This file is that one glyph, cut from the same source with fonttools, so it is
   the real Inter ₦ and not an approximation from a system font. 1.3 KB.

   It is declared BEFORE the extended subset and U+20A6 is punched out of that
   subset's range below, so the two can never both claim the codepoint. Relying on
   declaration order alone would work, but it would also be a rule nobody could
   see while editing either block. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-naira.woff2") format("woff2");
  unicode-range: U+20A6;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  /* U+20A0-20AB with U+20A6 removed — the naira sign comes from the file above. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ======================================================================
     RAW PALETTE — INK
     The neutral ramp the whole interface is built from. Very slightly cool
     (a hint of blue in the darks) so it sits with the accents rather than
     against them, but close enough to true grey to disappear.
     ====================================================================== */
  --ink-0:   #FFFFFF;
  --ink-25:  #FAFBFC;
  --ink-50:  #F4F6F8;
  --ink-100: #EBEEF2;
  --ink-150: #E3E7EC;
  --ink-200: #D5DAE2;
  --ink-300: #B6BDC9;
  --ink-400: #8E97A6;
  --ink-500: #6E7686;
  --ink-600: #545C6B;
  --ink-650: #434B58;
  --ink-700: #343B47;
  --ink-750: #272D38;
  --ink-800: #1D222B;
  --ink-850: #171B23;
  --ink-900: #12151B;
  --ink-950: #0C0E13;
  --ink-1000:#07090C;

  /* ======================================================================
     RAW PALETTE — TIDE  (the single action colour)
     Avenleo's teal. Deliberately not violet, which is the house colour of
     every AI demo, and deliberately not the blue this wore before it had its
     own name — a blue action button is the default of every dashboard ever
     shipped. Teal is rare enough to be recognisable and cool enough to sit
     beside the gold without either one shouting.

     Fully saturated, and that is the point — the first pass was mixed with
     grey and read as tentative rather than considered. This one is a real
     colour: 100% saturation across the ramp, so the button, the focus ring
     and the brand tile all look chosen.

     What limits it is contrast, not taste. White type on --tide-600 measures
     4.7:1, which clears the 4.5:1 an interface owes ordinary text; a brighter
     fill would fail that, so the vividness goes into --tide-400 and --tide-500
     — borders, focus rings, hover — where nothing has to be read through it.
     ====================================================================== */
  --tide-50:  #E6F7F1;
  --tide-100: #C4EEE1;
  --tide-200: #8FDDC7;
  --tide-300: #4FC9A8;
  --tide-400: #12B08D;
  --tide-500: #009A79;
  --tide-600: #008468;
  --tide-700: #006D56;
  --tide-800: #005544;
  --tide-900: #00402F;

  /* ======================================================================
     RAW PALETTE — AURUM  (value, rewards, earnings — and only those)
     Softened well back from the old gold. It marks money and nothing else,
     so it never appears twice on a screen without meaning the same thing.
     ====================================================================== */
  --aurum-100: #F5EAD3;
  --aurum-200: #EBD7AE;
  --aurum-300: #DEC088;
  --aurum-400: #CFAA69;
  --aurum-500: #B98F4B;
  --aurum-600: #97733A;
  --aurum-700: #755930;
  --aurum-800: #57432A;

  /* ======================================================================
     RAW PALETTE — STATUS
     Muted on purpose. A success that shouts is indistinguishable from an
     error that shouts.
     ====================================================================== */
  --jade-300:  #6FDCAE;  --jade-400: #46CB93;  --jade-500: #22AC77;  --jade-600: #158A5E;  --jade-700: #0F6B49;
  --amber-300: #F0CA82;  --amber-400: #E3AC50; --amber-500: #C98D2C; --amber-600: #A26F1D; --amber-700: #7D5615;
  --rose-300:  #F2A0A0;  --rose-400: #E77070;  --rose-500: #D94F4F;  --rose-600: #BC3636;  --rose-700: #9A2A2A;
  --sky-300:   #8CC8F0;  --sky-400: #5BAEE6;  --sky-500: #3391D4;  --sky-600: #2274B0;  --sky-700: #1A5A8A;

  /* ======================================================================
     TYPOGRAPHY
     ----------------------------------------------------------------------
     One family. Inter is the closest freely available face to the grotesques
     that serious software is set in, and it was drawn for screens: its
     figures line up in tables, its zero is unambiguous, and it holds up at
     11px, which is where half of a dense interface lives.

     The mono stack is the operating system's own. It costs no request, it is
     already the font the reader's terminal uses, and an address they are
     about to send money to should be shown in the face they trust for that.
     ====================================================================== */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Kept as a name so call sites need not change; it is deliberately the same
     face. Hierarchy is weight and tracking, not a second typeface. */
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* A compact scale. The top end came down hard — a 76px hero headline is a
     landing page for a startup, not a screen somebody works in every day. */
  --text-2xs: 0.6875rem; /* 11 — micro labels, table eyebrows */
  --text-xs:  0.75rem;   /* 12 — captions, meta */
  --text-sm:  0.8125rem; /* 13 — secondary UI */
  --text-base:0.875rem;  /* 14 — the default */
  --text-md:  0.9375rem; /* 15 — body copy, prose */
  --text-lg:  1.0625rem; /* 17 — card titles */
  --text-xl:  1.1875rem; /* 19 — section titles */
  --text-2xl: 1.375rem;  /* 22 — page headings */
  --text-3xl: 1.625rem;  /* 26 — primary figures */
  --text-4xl: 2rem;      /* 32 — the balance */
  --text-5xl: 2.5rem;    /* 40 — hero */
  --text-6xl: 3rem;      /* 48 — the largest thing in the product */

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Optical tracking: big text needs less, small caps need more. */
  --tracking-tighter: -0.022em;
  --tracking-tight:   -0.013em;
  --tracking-snug:    -0.006em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.07em;

  /* ======================================================================
     SPACING — 4px grid
     ====================================================================== */
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-7:  2rem;     /* 32 */
  --space-8:  2.5rem;   /* 40 */
  --space-9:  3rem;     /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-11: 5rem;     /* 80 */
  --space-12: 6rem;     /* 96 */
  --space-13: 8rem;     /* 128 */
  --space-14: 10rem;    /* 160 */

  /* ======================================================================
     RADIUS — precise, not friendly
     ====================================================================== */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;   /* the card */
  --radius-2xl: 16px;   /* the modal */
  --radius-3xl: 20px;
  --radius-full: 999px;

  /* ======================================================================
     MOTION — short enough to feel instant, long enough to be legible
     ====================================================================== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --dur-instant: 70ms;
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    260ms;
  --dur-slower:  380ms;

  /* ======================================================================
     Z-INDEX
     ====================================================================== */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  150;
  --z-drawer:  200;
  --z-overlay: 250;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;
  --z-max:     9999;

  /* ======================================================================
     LAYOUT
     ====================================================================== */
  --container:       1180px;
  --container-wide:  1400px;
  --container-prose: 680px;
  --sidebar-w:       248px;
  --topbar-h:        56px;
  --bottomnav-h:     58px;
}

/* ==========================================================================
   THEME: DARK  (default)
   --------------------------------------------------------------------------
   Not black. A true black surface with white text vibrates, and every card on
   top of it has to be lighter, which is how a dark interface ends up looking
   like a stack of grey boxes. The page sits at ink-950 and the cards a step
   above it, so a card reads as a card because of its edge, not its brightness.
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:            var(--ink-950);
  --color-bg-subtle:     var(--ink-900);
  --color-surface:       var(--ink-900);   /* app chrome: sidebar, topbar */
  --color-surface-1:     var(--ink-850);   /* cards, panels */
  --color-surface-2:     var(--ink-800);   /* inputs, raised */
  --color-surface-3:     var(--ink-750);   /* hover, active track */
  --color-elevated:      #1A1F28;          /* menus, popovers, tooltips */
  --color-scrim:         rgba(6, 8, 11, 0.72);

  --color-border:        #232833;
  --color-border-strong: #313846;
  --color-border-subtle: rgba(255, 255, 255, 0.05);
  --color-border-focus:  var(--tide-400);

  --color-text:          #E9EBF0;
  --color-text-muted:    #98A0AF;
  --color-text-subtle:   #737B8A;
  --color-text-faint:    #575F6D;
  --color-text-inverse:  var(--ink-1000);

  --color-primary:          var(--tide-600);
  --color-primary-hover:    var(--tide-500);
  --color-primary-active:   var(--tide-700);
  --color-primary-contrast: #FFFFFF;
  --color-primary-fg:       var(--tide-300); /* primary as readable text */
  --color-primary-soft:     rgba(0, 154, 121, 0.16);
  --color-primary-soft-hover: rgba(0, 154, 121, 0.24);
  --color-primary-border:   rgba(0, 154, 121, 0.40);

  --color-accent:          var(--aurum-400);
  --color-accent-strong:   var(--aurum-300);
  --color-accent-contrast: #241B08;
  --color-accent-soft:     rgba(207, 170, 105, 0.11);
  --color-accent-border:   rgba(207, 170, 105, 0.28);

  --color-success:        var(--jade-400);
  --color-success-soft:   rgba(70, 203, 147, 0.11);
  --color-success-border: rgba(70, 203, 147, 0.28);
  --color-warning:        var(--amber-400);
  --color-warning-soft:   rgba(227, 172, 80, 0.11);
  --color-warning-border: rgba(227, 172, 80, 0.28);
  --color-danger:         var(--rose-400);
  --color-danger-soft:    rgba(231, 112, 112, 0.11);
  --color-danger-border:  rgba(231, 112, 112, 0.30);
  --color-info:           var(--sky-400);
  --color-info-soft:      rgba(91, 174, 230, 0.11);
  --color-info-border:    rgba(91, 174, 230, 0.28);

  --color-focus-ring: rgba(18, 176, 141, 0.42);
  --color-skeleton:   #1C212A;
  --color-skeleton-sheen: rgba(255, 255, 255, 0.045);

  /* Elevation. On dark, a shadow is nearly invisible and a border is not, so
     the border does the structural work and these only separate things that
     genuinely float above the page. */
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34);
  --shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 16px 36px -12px rgba(0, 0, 0, 0.62);
  --shadow-xl: 0 28px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-ring: 0 0 0 1px var(--color-border-subtle);

  /* The one surface tint left in the system: a hairline of light along the top
     edge of an elevated panel, the way a physical edge catches a light source.
     Not a gradient fill — a 1px highlight. */
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   THEME: LIGHT
   --------------------------------------------------------------------------
   Paper, not white-on-white. The page is a shade below the cards so a card has
   somewhere to sit, and every border is a real line rather than a shadow doing
   an impression of one.
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --color-bg:            var(--ink-25);
  --color-bg-subtle:     var(--ink-50);
  --color-surface:       var(--ink-0);
  --color-surface-1:     var(--ink-0);
  --color-surface-2:     var(--ink-50);
  --color-surface-3:     var(--ink-100);
  --color-elevated:      var(--ink-0);
  --color-scrim:         rgba(18, 21, 27, 0.36);

  --color-border:        var(--ink-150);
  --color-border-strong: var(--ink-200);
  --color-border-subtle: rgba(18, 21, 27, 0.06);
  --color-border-focus:  var(--tide-600);

  --color-text:          #101319;
  --color-text-muted:    #5A6270;
  --color-text-subtle:   #7C8493;
  --color-text-faint:    #9CA4B2;
  --color-text-inverse:  #FFFFFF;

  --color-primary:          var(--tide-600);
  --color-primary-hover:    var(--tide-500);
  --color-primary-active:   var(--tide-700);
  --color-primary-contrast: #FFFFFF;
  --color-primary-fg:       var(--tide-700);
  --color-primary-soft:     rgba(0, 132, 104, 0.08);
  --color-primary-soft-hover: rgba(0, 132, 104, 0.13);
  --color-primary-border:   rgba(0, 132, 104, 0.24);

  --color-accent:          var(--aurum-600);
  --color-accent-strong:   var(--aurum-700);
  --color-accent-contrast: #FFFFFF;
  --color-accent-soft:     rgba(151, 115, 58, 0.08);
  --color-accent-border:   rgba(151, 115, 58, 0.22);

  --color-success:        var(--jade-600);
  --color-success-soft:   rgba(21, 138, 94, 0.08);
  --color-success-border: rgba(21, 138, 94, 0.22);
  --color-warning:        var(--amber-600);
  --color-warning-soft:   rgba(162, 111, 29, 0.09);
  --color-warning-border: rgba(162, 111, 29, 0.22);
  --color-danger:         var(--rose-600);
  --color-danger-soft:    rgba(188, 54, 54, 0.07);
  --color-danger-border:  rgba(188, 54, 54, 0.20);
  --color-info:           var(--sky-600);
  --color-info-soft:      rgba(34, 116, 176, 0.07);
  --color-info-border:    rgba(34, 116, 176, 0.20);

  --color-focus-ring: rgba(0, 132, 104, 0.28);
  --color-skeleton:   var(--ink-100);
  --color-skeleton-sheen: rgba(255, 255, 255, 0.75);

  --shadow-xs: 0 1px 1px rgba(18, 21, 27, 0.04);
  --shadow-sm: 0 1px 3px rgba(18, 21, 27, 0.07);
  --shadow-md: 0 6px 16px -6px rgba(18, 21, 27, 0.11);
  --shadow-lg: 0 16px 36px -14px rgba(18, 21, 27, 0.16);
  --shadow-xl: 0 28px 60px -22px rgba(18, 21, 27, 0.20);
  --shadow-ring: 0 0 0 1px var(--color-border);

  /* Light needs no lit edge — the surface is already brighter than the page.
     Written as a transparent shadow rather than `none` because call sites
     compose it into a list (`box-shadow: var(--shadow-md), var(--edge-highlight)`)
     and a `none` inside a shadow list is invalid, which silently throws away
     the whole declaration and every shadow in it. */
  --edge-highlight: 0 0 0 0 rgba(0, 0, 0, 0);
}