/* SafeRemit design tokens.

   One brand across both products: these are the values SafeRemit Trade uses
   (app/static/css/trade-modern.css), so Borderless and Trade look like the
   same company. The names are unchanged, so every stylesheet that reads them
   — app.css, site.css, staff.css — follows without edits.

   Ink and paper carry the design; gold, green, blue and red are accents that
   mean something (gold: attention, green: settled, blue: information,
   red: stopped). Keep lib/theme/tokens.dart in the app repo in step. */

:root {
  /* The palette is the palette, on every device. Android's Chrome and
     Samsung Internet will invert a page that has not said which schemes
     it supports, which turns the warm white ground grey-black and takes
     the brand with it. `only light` opts out of that rewriting rather
     than merely stating a preference, and it keeps native controls,
     scrollbars and form fields on the same side of the line. */
  color-scheme: only light;

  /* ---- Brand core ---- */
  --warm-white: #f7f8f2;
  --navy: #0d1b2f;
  --gold: #f4bd3f;
  --green: #62c670;
  --blue: #4bb0d8;

  /* ---- Navy scale ---- */
  --navy-900: #081221;
  --navy-800: #0d1b2f;
  --navy-700: #162842;
  --navy-600: #22344f;
  --navy-500: #34455f;
  --navy-400: #68758a;
  --navy-300: #8b96a8;
  --navy-200: #b6bfcb;
  --navy-100: #d9dee5;
  --navy-50:  #eef1f4;

  /* ---- Warm neutral scale ---- */
  --warm-50:  #fdfdfb;
  --warm-100: #f7f8f2;
  --warm-200: #f3f5ef;
  --warm-300: #ecefe6;
  --warm-400: #e0e4d9;
  --warm-500: #c9cec0;

  /* ---- Gold scale ---- */
  --gold-700: #b5851c;
  --gold-600: #dca92f;
  --gold-500: #f4bd3f;
  --gold-400: #f7cf6c;
  --gold-300: #fbe19e;
  --gold-200: #fdeec6;
  --gold-100: #fdf6e4;

  /* ---- Green scale ---- */
  --green-700: #3f9b52;
  --green-600: #4fb562;
  --green-500: #62c670;
  --green-400: #8ad795;
  --green-300: #b2e5b9;
  --green-200: #d6f2da;
  --green-100: #edf9ee;

  /* ---- Blue scale ---- */
  --blue-700: #2a7fa3;
  --blue-600: #3897c2;
  --blue-500: #4bb0d8;
  --blue-400: #7cc7e4;
  --blue-300: #a9dcef;
  --blue-200: #d0ecf7;
  --blue-100: #eaf6fb;

  /* ---- Functional ---- */
  --red-600: #c94b4b;
  --red-500: #e85d5d;
  --red-100: #fdeded;
  --amber-600: #b5851c;
  --amber-100: #fdf4dd;

  /* ---- Semantic surfaces ---- */
  --surface-page: var(--warm-white);
  --surface-page-alt: var(--warm-200);
  --surface-card: #FFFFFF;
  --surface-card-warm: var(--warm-50);
  --surface-sunken: var(--warm-200);
  --surface-inverse: var(--navy-700);
  --overlay: rgba(13, 27, 47, 0.45);

  /* ---- Semantic text ---- */
  --text-strong: var(--navy-800);
  --text-body: var(--navy-700);
  --text-muted: var(--navy-400);
  --text-subtle: var(--navy-300);
  --text-inverse: var(--warm-white);
  --text-on-gold: var(--navy-800);
  --text-link: var(--blue-600);

  /* ---- Borders ---- */
  --border-soft: rgba(13, 27, 47, 0.08);
  --border-default: rgba(13, 27, 47, 0.12);
  --border-strong: rgba(13, 27, 47, 0.22);
  --border-inverse: rgba(255, 255, 255, 0.14);
  --ring-focus: rgba(75, 176, 216, 0.45);

  /* ---- Status ---- */
  --status-success: var(--green-600);
  --status-success-bg: var(--green-100);
  --status-info: var(--blue-600);
  --status-info-bg: var(--blue-100);
  --status-warning: var(--amber-600);
  --status-warning-bg: var(--amber-100);
  --status-danger: var(--red-600);
  --status-danger-bg: var(--red-100);
  --value-up: var(--green-600);
  --value-down: var(--red-600);

  /* ---- Stablecoin brand marks ---- */
  --usdc: #2775CA;
  --usdt: #26A17B;

  /* ---- Gradients ---- */
  --grad-warm: linear-gradient(135deg, #f7f8f2 0%, #fdeec6 58%, #fbe19e 100%);
  --grad-brand: linear-gradient(105deg, var(--blue) 0%, var(--green) 100%);
  --grad-gold: linear-gradient(105deg, var(--gold-400) 0%, var(--gold-600) 100%);
  --grad-navy: linear-gradient(160deg, #162842 0%, #081221 100%);

  /* ---- Radii ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 15px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* ---- Spacing (8px grid) ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --s8: 48px;

  /* ---- Control heights ---- */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 54px;

  /* ---- Shadows (warm navy-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(13, 27, 47, 0.05);
  --shadow-sm: 0 2px 8px rgba(13, 27, 47, 0.06);
  --shadow-md: 0 12px 30px -10px rgba(13, 27, 47, 0.14), 0 2px 6px rgba(13, 27, 47, 0.05);
  --shadow-lg: 0 24px 70px -18px rgba(13, 27, 47, 0.18), 0 4px 12px rgba(13, 27, 47, 0.05);
  --shadow-xl: 0 34px 90px -20px rgba(13, 27, 47, 0.22);
  --sheet-shadow: 0 -10px 40px rgba(13, 27, 47, 0.22);
  --gold-glow: 0 12px 30px -8px rgba(244, 189, 63, 0.5);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-normal: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Typography ---- */
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Layout ---- */
  --app-width: 480px;
  --nav-height: 72px;
}