/* Jibo design tokens — mirrored from the Jibo design system (tokens.json).
   Light is the default; dark follows the OS unless the visitor picked a theme. */

@font-face { font-family: "IRANYekan Rd"; src: url("../assets/fonts/IRANYekan-RegularRd.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IRANYekan Rd"; src: url("../assets/fonts/IRANYekan-MediumRd.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IRANYekan Rd"; src: url("../assets/fonts/IRANYekan-BoldRd.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IRANYekan Rd"; src: url("../assets/fonts/IRANYekan-ExtraBoldRd.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "IRANYekan Rd"; src: url("../assets/fonts/IRANYekan-BlackRd.woff") format("woff"); font-weight: 900; font-display: swap; }

:root {
  color-scheme: light;

  /* Surfaces & text */
  --surface: #FFF8EE;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F7EDDF;
  --stage: #FCE7C8;
  --line: #E8D9C4;
  --line-strong: #8F7A64;
  --ink: #2E2433;
  --ink-muted: #6B5F70;

  /* Brand */
  --saffron: #F5A33C;
  --saffron-soft: #FFE6C2;
  --saffron-ink: #9A5406;
  --on-saffron: #2E2433;
  --pocket: #2F3E6E;
  --pocket-soft: #E3E8F5;
  --on-pocket: #FFF8EE;

  /* Semantic */
  --income: #3B7A2A;
  --income-fill: #93C572;
  --income-soft: #E6F2DA;
  --expense: #A8472D;
  --expense-fill: #EE9272;
  --expense-soft: #FCE5DC;
  --caution: #855600;
  --caution-fill: #F2C14E;
  --caution-soft: #FFF1CC;
  --success: #0F7169;
  --success-fill: #3FB8AD;
  --success-soft: #D6F1EE;
  --focus: #2F3E6E;

  /* Character (same in both themes) */
  --fur: #F5A33C;
  --fur-shade: #DE8526;
  --fur-highlight: #FFD08A;
  --outline: #3B2A35;
  --cheek: #F2837A;
  --denim: #2F3E6E;
  --denim-inner: #1B2446;
  --thread: #F5C66B;
  --tear: #8ED3F2;

  /* Type */
  --font-sans: "IRANYekan Rd", "Vazirmatn RD", Vazirmatn, Tahoma, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-soft: 0 6px 20px rgba(59, 42, 53, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #17212B;
    --surface-raised: #1E2C3A;
    --surface-sunken: #0E1621;
    --stage: #253546;
    --line: #2E3E4F;
    --line-strong: #6A7D90;
    --ink: #F6EEE3;
    --ink-muted: #A9B4BF;
    --saffron: #FFAE4A;
    --saffron-soft: #3A2B17;
    --saffron-ink: #FFC27A;
    --pocket: #8FA3E0;
    --pocket-soft: #25324F;
    --on-pocket: #17212B;
    --income: #A6D98A;
    --income-fill: #7DB85C;
    --income-soft: #1F3322;
    --expense: #FF9E80;
    --expense-fill: #E0795A;
    --expense-soft: #3A2520;
    --caution: #FFD47A;
    --caution-fill: #E8B53E;
    --caution-soft: #3A3016;
    --success: #6FD9CD;
    --success-fill: #3AA99E;
    --success-soft: #15332F;
    --focus: #FFC27A;
    --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #17212B;
  --surface-raised: #1E2C3A;
  --surface-sunken: #0E1621;
  --stage: #253546;
  --line: #2E3E4F;
  --line-strong: #6A7D90;
  --ink: #F6EEE3;
  --ink-muted: #A9B4BF;
  --saffron: #FFAE4A;
  --saffron-soft: #3A2B17;
  --saffron-ink: #FFC27A;
  --pocket: #8FA3E0;
  --pocket-soft: #25324F;
  --on-pocket: #17212B;
  --income: #A6D98A;
  --income-fill: #7DB85C;
  --income-soft: #1F3322;
  --expense: #FF9E80;
  --expense-fill: #E0795A;
  --expense-soft: #3A2520;
  --caution: #FFD47A;
  --caution-fill: #E8B53E;
  --caution-soft: #3A3016;
  --success: #6FD9CD;
  --success-fill: #3AA99E;
  --success-soft: #15332F;
  --focus: #FFC27A;
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.35);
}