/* Daftar design tokens — shared by the app, the landing page, the statement page and admin.
   V3 identity: the logo's teal + amber ribbon on soft green-grey neutrals. Every other hue is gone:
   "info" and "ok" are teal, "warn" is amber, and red is kept ONLY for money that is owed (debt).
   Logical properties only (RTL-first). Latin digits everywhere. */

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand (logo teal) */
  --brand: #0F766E;
  --brand-strong: #0B5E57;
  --brand-hover: #0D6A63;
  --brand-soft: #D2EBE6;
  --brand-softer: #E7F3F0;
  --brand-ink: #FFFFFF;
  --brand-glow: rgba(15, 118, 110, .16);

  /* Accent (logo amber ribbon) — Pro, highlights, "attention" */
  --accent: #D97706;
  --accent-strong: #B45309;
  --accent-soft: #FBEFD5;
  --accent-ink: #78350F;

  /* Surfaces — a calm green-grey canvas (a little darker than V2) so cards stand out */
  --bg: #E1E8E5;
  --bg-deep: #D5DFDB;
  --bg-elevated: #FBFCFC;
  --surface: #FCFDFD;
  --surface-2: #EEF3F1;
  --surface-3: #E2E9E6;
  --overlay: rgba(9, 22, 20, .5);

  /* Text */
  --text: #0E1E1B;
  --text-2: #3E504C;
  --text-3: #667874;
  --text-inverse: #FFFFFF;

  /* Lines */
  --border: #D1DBD7;
  --border-strong: #B5C4BF;
  --focus: #0F766E;

  /* Semantic — mapped onto the two brand hues */
  --danger: #B42318;
  --danger-soft: #FBE4E1;
  --danger-ink: #8C1B12;
  --warn: #D97706;
  --warn-soft: #FBEFD5;
  --warn-ink: #78350F;
  --ok: #0F766E;
  --ok-soft: #D2EBE6;
  --ok-ink: #0B5E57;
  --info: #0F766E;
  --info-soft: #E2F1ED;
  --info-ink: #0B5E57;

  /* Money: owed = brick red, paid = brand teal */
  --debt: #B42318;
  --debt-soft: #FBE4E1;
  --debt-solid: #B42318;   /* background of "debt" buttons (white text) */
  --payment: #0F766E;
  --payment-soft: #D2EBE6;

  /* Spacing (V5): one scale for every gap / padding — calm, not packed */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --section-gap: 28px;   /* between sections of a page */
  --row-min: 60px;       /* list rows: easy to tap */

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(14, 40, 36, .07), 0 1px 1px rgba(14, 40, 36, .04);
  --shadow-md: 0 10px 24px -12px rgba(14, 60, 54, .30), 0 2px 6px -2px rgba(14, 40, 36, .08);
  --shadow-lg: 0 24px 48px -18px rgba(14, 40, 36, .34), 0 8px 16px -8px rgba(14, 40, 36, .12);
  --card-shadow: 0 1px 2px rgba(14, 40, 36, .05), 0 10px 22px -18px rgba(14, 60, 54, .35);
  --gold: #F59E0B;
  --gold-2: #FBBF24;
  --gold-ink: #78350F;

  /* Background art (notebook lines from the logo) */
  --line-color: rgba(15, 118, 110, .075);
  --glow: rgba(15, 118, 110, .14);

  /* Type */
  --font: 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --lh: 1.55;

  /* Spacing (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Layout */
  --nav-h: 64px;
  --topbar-h: 56px;
  --sidebar-w: 252px;
  --content-max: 1100px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 160ms;
}

/* Dark theme (a little lighter than V2): follows the system unless data-theme is set explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --brand: #2DD4BF;
    --brand-strong: #5EEAD4;
    --brand-hover: #4BDCC8;
    --brand-soft: #17423E;
    --brand-softer: #14302E;
    --brand-ink: #042320;
    --brand-glow: rgba(45, 212, 191, .14);
    --accent: #FBBF24;
    --accent-strong: #FCD34D;
    --accent-soft: #3A2D10;
    --accent-ink: #FDE68A;

    --bg: #121D20;
    --bg-deep: #0E181A;
    --bg-elevated: #182528;
    --surface: #1A282B;
    --surface-2: #213236;
    --surface-3: #2A3D41;
    --overlay: rgba(0, 0, 0, .58);

    --text: #E9F0EE;
    --text-2: #AFBFBB;
    --text-3: #83958F;
    --text-inverse: #0E181A;

    --border: #2B3D41;
    --border-strong: #3B5257;
    --focus: #2DD4BF;

    --danger: #F97066;
    --danger-soft: #3D1D1A;
    --danger-ink: #FDA29B;
    --warn: #FBBF24;
    --warn-soft: #3A2D10;
    --warn-ink: #FDE68A;
    --ok: #2DD4BF;
    --ok-soft: #17423E;
    --ok-ink: #99F6E4;
    --info: #2DD4BF;
    --info-soft: #163633;
    --info-ink: #99F6E4;

    --debt: #F97066;
    --debt-soft: #3D1D1A;
    --debt-solid: #C9301F;
    --payment: #2DD4BF;
    --payment-soft: #17423E;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 10px 22px -10px rgba(0, 0, 0, .55);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .65);
    --card-shadow: 0 1px 0 rgba(255, 255, 255, .02), 0 10px 24px -20px rgba(0, 0, 0, .6);
    --gold: #FBBF24;
    --gold-2: #FDE68A;
    --gold-ink: #FDE68A;

    --line-color: rgba(94, 234, 212, .05);
    --glow: rgba(45, 212, 191, .12);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --brand: #2DD4BF;
  --brand-strong: #5EEAD4;
  --brand-hover: #4BDCC8;
  --brand-soft: #17423E;
  --brand-softer: #14302E;
  --brand-ink: #042320;
  --brand-glow: rgba(45, 212, 191, .14);
  --accent: #FBBF24;
  --accent-strong: #FCD34D;
  --accent-soft: #3A2D10;
  --accent-ink: #FDE68A;

  --bg: #121D20;
  --bg-deep: #0E181A;
  --bg-elevated: #182528;
  --surface: #1A282B;
  --surface-2: #213236;
  --surface-3: #2A3D41;
  --overlay: rgba(0, 0, 0, .58);

  --text: #E9F0EE;
  --text-2: #AFBFBB;
  --text-3: #83958F;
  --text-inverse: #0E181A;

  --border: #2B3D41;
  --border-strong: #3B5257;
  --focus: #2DD4BF;

  --danger: #F97066;
  --danger-soft: #3D1D1A;
  --danger-ink: #FDA29B;
  --warn: #FBBF24;
  --warn-soft: #3A2D10;
  --warn-ink: #FDE68A;
  --ok: #2DD4BF;
  --ok-soft: #17423E;
  --ok-ink: #99F6E4;
  --info: #2DD4BF;
  --info-soft: #163633;
  --info-ink: #99F6E4;

  --debt: #F97066;
  --debt-soft: #3D1D1A;
  --debt-solid: #C9301F;
  --payment: #2DD4BF;
  --payment-soft: #17423E;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 22px -10px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .65);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .02), 0 10px 24px -20px rgba(0, 0, 0, .6);
  --gold: #FBBF24;
  --gold-2: #FDE68A;
  --gold-ink: #FDE68A;

  --line-color: rgba(94, 234, 212, .05);
  --glow: rgba(45, 212, 191, .12);
}