/* ==========================================================================
   Fingo Design System v2 — Tokens
   Fonts, CSS variables, base reset, animations
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* --------------------------------------------------------------------------
   CSS Variables (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  --fg-primary: #0A6B4C;
  --fg-primary-light: #16C77E;
  --fg-primary-dark: #072018;
  --fg-accent: #C8F65D;
  --fg-accent-text: #D6FF7A;
  --fg-success: #16A06A;
  --fg-error: #E5484D;
  --fg-warning: #D98A1F;
  --fg-text: #0E1A14;
  --fg-text-secondary: #33433B;
  --fg-text-muted: #67786F;
  --fg-text-faint: #8A988F;
  --fg-text-placeholder: #A7B4AC;
  --fg-bg: #F4F7F4;
  --fg-bg-dark: #0B1712;
  --fg-surface: #FFFFFF;
  --fg-border: #EAF0EC;
  --fg-border-light: #EDF2EF;
  --fg-border-input: #E1EAE5;
  --fg-border-medium: #E6EDE9;
  --fg-border-dark: #D6EBE0;
  --fg-tint-green: #EAF6F0;
  --fg-tint-green-light: #F0F6F2;
  --fg-tint-warm: #FFF3E6;
  --fg-tint-red: #FDECEC;

  --fg-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --fg-font-mono: 'Space Grotesk', ui-monospace, monospace;

  --fg-radius-xs: 3px;
  --fg-radius-sm: 6px;
  --fg-radius-md: 10px;
  --fg-radius-lg: 11px;
  --fg-radius-xl: 12px;
  --fg-radius-2xl: 13px;
  --fg-radius-3xl: 14px;
  --fg-radius-4xl: 15px;
  --fg-radius-5xl: 16px;
  --fg-radius-6xl: 17px;
  --fg-radius-7xl: 18px;
  --fg-radius-8xl: 20px;
  --fg-radius-9xl: 22px;
  --fg-radius-10xl: 26px;
  --fg-radius-11xl: 28px;
  --fg-radius-12xl: 46px;
  --fg-radius-full: 100px;

  --fg-shadow-primary: 0 14px 26px -10px rgba(10,107,76,.7);
  --fg-shadow-primary-sm: 0 12px 22px -10px rgba(10,107,76,.6);
  --fg-shadow-button: 0 6px 14px -5px rgba(10,107,76,.6);
  --fg-shadow-card: 0 20px 34px -16px rgba(10,107,76,.7);
  --fg-shadow-card-dark: 0 20px 34px -16px rgba(7,32,24,.85);
  --fg-shadow-toast: 0 10px 24px -8px rgba(0,0,0,.5);
  --fg-shadow-overlay: 0 50px 90px -24px rgba(0,0,0,.7);
  --fg-shadow-inset: 0 1px 2px rgba(14,26,20,.03);

  --fg-transition-fast: .15s ease;
  --fg-transition-base: .2s ease;
  --fg-transition-slow: .3s ease;
}

/* --------------------------------------------------------------------------
   Base Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--fg-font-body); color: var(--fg-text); background: var(--fg-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
input, button, textarea, select { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--fg-text-placeholder); font-weight: 500; }

/* --------------------------------------------------------------------------
   Scrollbar Utilities
   -------------------------------------------------------------------------- */
.fg-scroll-hide::-webkit-scrollbar,
#fingo-scroll::-webkit-scrollbar,
#fingo-appscroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.fg-scroll-hide, #fingo-scroll, #fingo-appscroll { scrollbar-width: none; }

/* Admin scrollbar */
#adm-main::-webkit-scrollbar,
#adm-nav::-webkit-scrollbar,
.adm-mscroll::-webkit-scrollbar { width: 8px; height: 8px; }
#adm-main::-webkit-scrollbar-thumb,
.adm-mscroll::-webkit-scrollbar-thumb { background: #D5E0D9; border-radius: 8px; }
#adm-nav::-webkit-scrollbar-thumb { background: #27483A; border-radius: 8px; }
#adm-main::-webkit-scrollbar-track,
#adm-nav::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes fg-spin { to { transform: rotate(360deg); } }
@keyframes fg-pop { 0%{transform:scale(.6);opacity:0;} 60%{transform:scale(1.06);} 100%{transform:scale(1);opacity:1;} }
@keyframes fg-up { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes fg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fg-pulse { 0%,100%{opacity:1;} 50%{opacity:.45;} }
@keyframes fg-tick { 0%{transform:translateY(40%);opacity:0;} 100%{transform:translateY(0);opacity:1;} }
@keyframes fg-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.fg-animate-pop { animation: fg-pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.fg-animate-fade { animation: fg-fade .25s ease forwards; }
.fg-animate-slide-up { animation: fg-slide-up .4s cubic-bezier(.22,1,.36,1) forwards; }
.fg-animate-spin { animation: fg-spin .9s linear infinite; }

/* --------------------------------------------------------------------------
   App Shell
   -------------------------------------------------------------------------- */
.fg-shell { min-height: 100vh; width: 100%; background: var(--fg-bg); display: flex; align-items: stretch; justify-content: center; padding: 0; font-family: var(--fg-font-body); }
.fg-phone { width: 100%; max-width: 480px; min-height: 100vh; background: var(--fg-bg); position: relative; flex-shrink: 0; }
.fg-phone-screen { width: 100%; min-height: 100vh; background: var(--fg-bg); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.fg-notch,
.fg-status-bar { display: none; }

/* --------------------------------------------------------------------------
   Color / Background Utilities
   -------------------------------------------------------------------------- */
.fg-color-text { color: var(--fg-text); }
.fg-color-text-secondary { color: var(--fg-text-secondary); }
.fg-color-text-muted { color: var(--fg-text-muted); }
.fg-color-text-faint { color: var(--fg-text-faint); }
.fg-color-primary { color: var(--fg-primary); }
.fg-color-primary-light { color: var(--fg-primary-light); }
.fg-color-accent { color: var(--fg-accent); }
.fg-color-accent-text { color: var(--fg-accent-text); }
.fg-color-success { color: var(--fg-success); }
.fg-color-error { color: var(--fg-error); }
.fg-color-white { color: #fff; }

.fg-bg-primary { background: var(--fg-primary); }
.fg-bg-primary-gradient { background: linear-gradient(135deg, var(--fg-primary), var(--fg-primary-light)); }
.fg-bg-primary-gradient-shallow { background: linear-gradient(140deg, var(--fg-primary) 0%, #0B7A54 52%, var(--fg-primary-light) 140%); }
.fg-bg-primary-gradient-dark { background: linear-gradient(155deg, #072018 0%, var(--fg-primary) 100%); }
.fg-bg-accent { background: var(--fg-accent); }
.fg-bg-success { background: var(--fg-success); }
.fg-bg-error { background: var(--fg-error); }
.fg-bg-tint-green { background: var(--fg-tint-green); }
.fg-bg-tint-green-light { background: var(--fg-tint-green-light); }
.fg-bg-tint-warm { background: var(--fg-tint-warm); }
.fg-bg-tint-red { background: var(--fg-tint-red); }
.fg-bg-surface { background: var(--fg-surface); }
.fg-bg-bg { background: var(--fg-bg); }
.fg-bg-dark { background: var(--fg-bg-dark); }