/* ==========================================================================================
   Compass Afar -- THE theme file. Every colour, type size, spacing step, radius, shadow and
   motion value the app uses is declared here and nowhere else; styles.css only reads them.

   Colours: the existing pink/rose palette, unchanged. Do not add hues here -- add a semantic
   alias of an existing one instead.
   ========================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  color-scheme: light;

  /* ---- colour: the pink scale ---- */
  --p1: #fafafa; --p2: #fdf6f9; --p3: #fbeaf1; --p4: #f9deea; --p5: #f7d2e4;
  --wash: var(--p3);
  --surface: #ffffff;
  --surface-soft: var(--p2);
  --chip: var(--p3);
  --selected: var(--p5);
  --border: var(--p4);
  --border-strong: #e98bbd;
  --accent: #e85a99;
  --accent-deep: #c93e7d;
  --accent-press: #ad3269;
  --on-accent: #ffffff;
  --ink: #241820;
  --ink-soft: #79626c;
  --ink-faint: #a98da0;
  /* system neutrals: for chrome that should not read as brand pink (icon buttons, inactive icons, hairline ticks).
     iOS label / fill greys; --neutral-text is nudged a little darker than iOS's secondary label so 12px text keeps contrast. */
  --neutral-text: rgba(60, 60, 67, .74);
  --neutral-line: rgba(60, 60, 67, .30);
  --neutral-fill: rgba(120, 120, 128, .12);
  /* status colours (kept: green / amber / red are semantic, not brand) */
  --safe-fg: #227a52; --safe-bg: #e3f3ea;
  --mod-fg: #a8690a; --mod-bg: #fdf0d9;
  --risk-fg: #a5223a; --risk-bg: #fbe3e8;
  --pending-fg: #6b5a3f; --pending-bg: #f4ecd8;
  --map-bg: #f3eedb; --map-park: #cfe3c0; --map-road: #c3bb9e;
  /* Budget categories: four pinks, darkest to lightest. Rent is the brand's deep rose (--accent-deep). */
  --budget-rent: var(--accent-deep);
  --budget-travel: #e880ae;
  --budget-entertainment: #f3aecb;
  --budget-essentials: #f9d6e6;
  --budget-over: #b3263f;
  /* translucent ink / accent, for shadows, scrims and glows -- derived from the palette above */
  --ink-rgb: 36, 16, 25;
  --accent-rgb: 201, 62, 125;
  --scrim: rgba(var(--ink-rgb), .42);

  /* ---- type scale: exactly four sizes ---- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fs-display: 1.6rem;   /* screen titles */
  --fs-title: 1.1rem;     /* section headers, card titles */
  --fs-body: .92rem;      /* everything you read */
  --fs-caption: .72rem;   /* labels, eyebrows, meta, mono tags */
  --lh-tight: 1.15; --lh-body: 1.5;
  --tracking-caps: .1em;

  /* ---- spacing ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px;

  /* ---- radius ---- */
  --radius-l: 28px; --radius-m: 16px; --radius-s: 10px; --radius-pill: 999px;

  /* ---- shadows (ink-tinted, never grey) ---- */
  --shadow-card: 0 8px 20px -14px rgba(var(--ink-rgb), .28);
  --shadow-float: 0 18px 40px -18px rgba(var(--ink-rgb), .38);
  --shadow-accent: 0 10px 24px -10px rgba(var(--accent-rgb), .55);
  --shadow-drawer: -20px 0 44px -16px rgba(var(--ink-rgb), .4);
  --budget-shadow: 0 14px 34px -18px rgba(173,50,105,.45);

  /* ---- motion ---- */
  --dur-fast: 150ms;    /* hover, press, small reveals */
  --dur-base: 260ms;    /* drawers, sheets, needle settle */
  --dur-slow: 450ms;    /* screen slide, compass snap */
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* decelerate */
  --ease-inout: cubic-bezier(.65, 0, .35, 1);    /* screen slides */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);/* overshoot: the needle settling */
}

html[data-theme="dark"]{
  color-scheme: dark;
  --p1: #171114; --p2: #1e161b; --p3: #271b22; --p4: #33232c; --p5: #452c3a;
  --wash: #120d10;
  --surface: #1c1418;
  --surface-soft: #241a1f;
  --chip: #2c1f27;
  --selected: #452c3a;
  --border: #3a2830;
  --border-strong: #b34e83;
  --accent: #f0679f;
  --accent-deep: #f388b3;
  --accent-press: #ffa8c8;
  --ink: #f6ecf0;
  --ink-soft: #cba9b8;
  --ink-faint: #8d6e7a;
  --neutral-text: rgba(235, 235, 245, .70);
  --neutral-line: rgba(235, 235, 245, .30);
  --neutral-fill: rgba(120, 120, 128, .28);
  --safe-fg: #6fd39e; --safe-bg: #163a29;
  --mod-fg: #f0b25a; --mod-bg: #3d2c12;
  --risk-fg: #ff8fa3; --risk-bg: #421a24;
  --pending-fg: #d8c48f; --pending-bg: #332a19;
  --map-bg: #241f16; --map-park: #23331f; --map-road: #4a4436;
  /* On dark, "darkest to lightest" flips to brightest to dimmest so the order still reads and every shade stays visible. */
  --budget-rent: var(--accent-deep);
  --budget-travel: #d0679b;
  --budget-entertainment: #a24e7b;
  --budget-essentials: #6f3856;
  --budget-over: #ff8fa3;
  --ink-rgb: 0, 0, 0;
  --accent-rgb: 240, 103, 159;
  --scrim: rgba(0, 0, 0, .55);
  --shadow-card: 0 8px 20px -14px rgba(0,0,0,.6);
  --shadow-float: 0 18px 40px -18px rgba(0,0,0,.7);
  --budget-shadow: 0 14px 34px -18px rgba(0,0,0,.7);
}

/* ==========================================================================================
   iOS SYSTEM (new). The tokens the native-style screens are built from (ios.css reads only these). They sit beside the
   older tokens above while screens are moved over one at a time; when the last screen has moved, the old ones go.
   Colour still comes from the brand palette above (--accent, --accent-deep, the semantic status colours): the iOS layer adds
   neutrals (grouped background, hairlines, label greys), not new hues. Accent is for primary buttons, selected states and
   links only. Text on the accent fill uses --ios-on-tint (white in light, deep rose-black in dark) because white on the
   brand pink alone is only 3.3:1.
   ========================================================================================== */
:root{
  /* type: the system font, an iOS size scale, and three weights (regular / semibold / bold-for-large-titles-only) */
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --ios-fs-large: 34px;   --ios-lh-large: 41px;   /* large title */
  --ios-fs-title: 22px;   --ios-lh-title: 28px;   /* title 2 */
  --ios-fs-title-s: 20px; --ios-lh-title-s: 25px; /* title 3 */
  --ios-fs-body: 17px;    --ios-lh-body: 22px;    /* body, row titles, buttons */
  --ios-fs-sub: 15px;     --ios-lh-sub: 20px;     /* subheadline, row subtitles */
  --ios-fs-foot: 13px;    --ios-lh-foot: 18px;    /* footnote: section headers and footers */
  --ios-fs-tab: 10px;     /* tab bar labels */
  --ios-w-regular: 400; --ios-w-semibold: 600; --ios-w-bold: 700;

  /* surfaces: grouped style -- a light grey-pink page, white cards */
  --ios-bg: #f4eff2;
  --ios-card: #ffffff;
  --ios-bar: rgba(250, 246, 248, .86);          /* translucent nav / tab bar (blurred behind) */
  --ios-separator: rgba(60, 60, 67, .22);       /* hairline between rows */
  --ios-highlight: rgba(60, 60, 67, .09);       /* a row while it is pressed */
  --ios-fill: rgba(120, 120, 128, .12);         /* neutral chip / segmented track / icon tile */
  --ios-switch-off: rgba(120, 120, 128, .30);   /* the track of a switch that is off */

  /* labels */
  --ios-label: #1c1417;
  --ios-label-2: rgba(60, 60, 67, .62);
  --ios-label-3: rgba(60, 60, 67, .30);

  /* accent (the brand rose): links, selected states, primary button */
  --ios-tint: var(--accent-deep);
  --ios-tint-fill: var(--accent-deep);
  --ios-on-tint: #ffffff;
  --ios-tint-soft: rgba(var(--accent-rgb), .13);  /* icon tile background, tinted button background */
  --ios-destructive: var(--risk-fg);

  /* shape */
  --ios-margin: 16px;          /* side margins */
  --ios-radius-card: 12px;
  --ios-radius-tile: 7px;      /* the 29px icon square */
  --ios-radius-btn: 14px;
  --ios-radius-sheet: 14px;
  --ios-row-h: 44px;           /* minimum row / tap target height */
  --ios-tile: 29px;
  --ios-tabbar-h: 49px;
  --ios-sp-1: 8px; --ios-sp-2: 16px; --ios-sp-3: 24px; /* the 8 / 16 / 24 rhythm */
  --ios-safe-top: env(safe-area-inset-top, 0px);
  --ios-safe-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-theme="dark"]{
  --ios-bg: #0e0a0c;
  --ios-card: #1c1418;
  --ios-bar: rgba(22, 16, 19, .82);
  --ios-separator: rgba(235, 235, 245, .17);
  --ios-highlight: rgba(235, 235, 245, .10);
  --ios-fill: rgba(120, 120, 128, .30);
  --ios-switch-off: rgba(120, 120, 128, .45);
  --ios-label: #f6ecf0;
  --ios-label-2: rgba(235, 235, 245, .62);
  --ios-label-3: rgba(235, 235, 245, .30);
  --ios-tint-fill: var(--accent);
  --ios-on-tint: #2a0b18;
  --ios-tint-soft: rgba(var(--accent-rgb), .20);
}

/* Reduced motion: every animation and transition collapses to an instant change. The compass variants
   additionally render static (see .c-* rules in styles.css). */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}