/*
 * Buckety brand tokens
 * ---------------------
 * Canonical theme source for the Buckety progressive web application.
 * Import this file once, early in the web project, and consume the custom
 * properties throughout the interface. Values are authored for a dark base
 * with vivid, friendly accents.
 *
 * Target location in the web project:
 *   src/Buckety.Web/wwwroot/css/brand-tokens.css
 *
 * Written in British English. Colours are grouped as background layers,
 * surfaces, accents, text, semantic aliases, radii, shadows and gradients.
 */

:root {
  /* ---------------------------------------------------------------------
   * Background layers
   * The application sits on a near-black, very dark desaturated base. Deeper
   * layers recede, surfaces rise towards the viewer.
   * ------------------------------------------------------------------- */
  --bkt-bg-deep: #0E0E15;      /* furthest layer, page gutters, scrims */
  --bkt-bg: #14141C;           /* canonical application background */
  --bkt-surface: #1C1C28;      /* cards, list rows, primary panels */
  --bkt-surface-2: #262635;    /* raised surface, menus, sheets */
  --bkt-surface-3: #323243;    /* highest surface, popovers, tooltips */
  --bkt-border: #2E2E3E;       /* hairline dividers and outlines */
  --bkt-border-strong: #3C3C50;/* emphasised borders, focus containers */
  --bkt-overlay: rgba(10, 10, 16, 0.62); /* modal backdrop */

  /* ---------------------------------------------------------------------
   * Core brand accents
   * A compact, cohesive family. Mint is the primary identity colour and the
   * colour of the bucket mark. Amber represents coins and money highlights.
   * ------------------------------------------------------------------- */
  --bkt-mint: #2FD9B4;         /* primary brand, bucket body */
  --bkt-mint-deep: #1FB89A;    /* primary pressed and shading */
  --bkt-mint-soft: rgba(47, 217, 180, 0.16); /* tinted fills */

  --bkt-amber: #FFC24B;        /* coins, money highlight, warnings */
  --bkt-amber-deep: #F2A833;   /* coin shading, pressed amber */
  --bkt-amber-soft: rgba(255, 194, 75, 0.16);

  --bkt-coral: #FF6B6B;        /* alerts, over budget, destructive */
  --bkt-coral-deep: #E85454;
  --bkt-coral-soft: rgba(255, 107, 107, 0.16);

  --bkt-purple: #A88BFA;       /* savings, feature accents */
  --bkt-purple-deep: #8E6EF0;
  --bkt-purple-soft: rgba(168, 139, 250, 0.16);

  /* ---------------------------------------------------------------------
   * Extended bucket hues
   * Additional distinct hues so individual category buckets can each carry
   * their own colour while remaining part of the same family.
   * ------------------------------------------------------------------- */
  --bkt-blue: #57B6FF;         /* transport, information */
  --bkt-blue-deep: #3F9BEA;
  --bkt-green: #4FE39B;        /* income, positive balances */
  --bkt-green-deep: #34C97F;
  --bkt-pink: #FF8FC2;         /* entertainment, playful accents */
  --bkt-pink-deep: #F06FA9;

  /* ---------------------------------------------------------------------
   * Text
   * ------------------------------------------------------------------- */
  --bkt-text: #F4F3FA;         /* primary text on dark surfaces */
  --bkt-text-muted: #ABA9BD;   /* secondary text, captions */
  --bkt-text-subtle: #6E6C82;  /* tertiary text, placeholders */
  --bkt-on-accent: #101018;    /* text and glyphs on bright accents */

  /* ---------------------------------------------------------------------
   * Semantic aliases
   * Prefer these in feature code so the underlying palette can change in one
   * place. They map onto the accents above.
   * ------------------------------------------------------------------- */
  --bkt-primary: var(--bkt-mint);
  --bkt-primary-deep: var(--bkt-mint-deep);
  --bkt-positive: var(--bkt-green);   /* credits, money in */
  --bkt-warning: var(--bkt-amber);    /* approaching a limit */
  --bkt-negative: var(--bkt-coral);   /* debits, over budget */
  --bkt-info: var(--bkt-blue);
  --bkt-focus: #7CE8D2;               /* focus ring, high visibility */

  /* ---------------------------------------------------------------------
   * Corner radii
   * Rounded throughout to support the friendly character.
   * ------------------------------------------------------------------- */
  --bkt-radius-xs: 6px;
  --bkt-radius-sm: 10px;
  --bkt-radius-md: 16px;
  --bkt-radius-lg: 24px;
  --bkt-radius-xl: 32px;
  --bkt-radius-pill: 999px;

  /* ---------------------------------------------------------------------
   * Shadows and glows
   * Soft elevation for dark surfaces, plus optional coloured glows for the
   * primary and coin accents.
   * ------------------------------------------------------------------- */
  --bkt-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --bkt-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --bkt-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --bkt-glow-mint: 0 0 24px rgba(47, 217, 180, 0.35);
  --bkt-glow-amber: 0 0 24px rgba(255, 194, 75, 0.35);

  /* ---------------------------------------------------------------------
   * Gradients
   * The bucket and coin gradients are reused by the mark and by interface
   * surfaces to keep the raster and interface visuals consistent.
   * ------------------------------------------------------------------- */
  --bkt-grad-bucket: linear-gradient(160deg, #38E6C0 0%, #1FB89A 100%);
  --bkt-grad-coin: linear-gradient(160deg, #FFD57A 0%, #F2A833 100%);
  --bkt-grad-surface: linear-gradient(180deg, #1C1C28 0%, #171722 100%);
  --bkt-grad-brand: linear-gradient(135deg, #2FD9B4 0%, #57B6FF 100%);

  /* ---------------------------------------------------------------------
   * Typography
   * Rounded, friendly type. See palette.md for the full recommendation and
   * the Google Fonts import line.
   * ------------------------------------------------------------------- */
  --bkt-font-display: "Baloo 2", "Fredoka", system-ui, sans-serif;
  --bkt-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bkt-weight-regular: 400;
  --bkt-weight-medium: 500;
  --bkt-weight-semibold: 600;
  --bkt-weight-bold: 700;
  --bkt-weight-display: 800; /* wordmark and prominent numerals */

  /* ---------------------------------------------------------------------
   * Motion
   * Gentle, springy timings suit the playful character without becoming
   * distracting.
   * ------------------------------------------------------------------- */
  --bkt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bkt-duration-fast: 140ms;
  --bkt-duration-base: 220ms;
}

/*
 * Convenience base styles. These are optional. Feature code may set them
 * directly, but applying them to the document keeps the dark theme coherent
 * from first paint.
 */
:root {
  color-scheme: dark;
}

body {
  background-color: var(--bkt-bg);
  color: var(--bkt-text);
  font-family: var(--bkt-font-body);
}