/* Design tokens - the only place colours, shadows and theme effects live.

   Three appearances share one set of semantic names:
     [data-theme="light"]     REALM Light, "Alpine Residence" (also :root)
     [data-theme="dark"]      REALM Dark, "Apres Hours"
     [data-theme="midnight"]  Midnight - the original neon look, kept as an option
   base.html sets data-theme before the first paint (System resolves to light
   or dark there). Components in realm.css use these tokens only, so anything
   built once works in all three. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------ shared scale */
:root {
  --r-font-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --r-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-type-display: 2rem;
  --r-type-title: 1.625rem;
  --r-type-heading: 1.25rem;
  --r-type-meta: .8125rem;
  --r-type-label: .6875rem;

  --r-space-1: 4px; --r-space-2: 8px; --r-space-3: 12px; --r-space-4: 16px; --r-space-5: 20px;
  --r-space-6: 24px; --r-space-7: 32px; --r-space-8: 40px; --r-space-9: 56px;
  --r-gutter: 16px;

  --r-radius-sm: 8px; --r-radius-md: 12px; --r-radius-lg: 16px; --r-radius-xl: 22px; --r-radius-pill: 999px;

  --r-ease: cubic-bezier(.2, .7, .2, 1);
  --r-dur-1: 120ms; --r-dur-2: 180ms; --r-dur-3: 240ms;
}
@media (min-width: 390px) { :root { --r-gutter: 20px; } }
@media (min-width: 992px) { :root { --r-gutter: 40px; --r-type-display: 2.75rem; --r-type-title: 2rem; } }

/* ------------------------------------------------------------ REALM Light */
:root, [data-theme="light"] {
  color-scheme: light;
  --r-canvas: #F5F1E9;
  --r-surface: #FBF9F5;
  --r-surface-raised: #FFFFFF;
  --r-surface-sunken: #EDE7DC;
  --r-selected: #EDE7DC;
  --r-border: #E2D9CA;
  --r-border-strong: #9C8F7C;
  --r-text: #2A231C;
  --r-text-secondary: #5C5246;
  --r-text-tertiary: #71665A;
  --r-action: #2A231C;
  --r-action-hover: #3D3329;
  --r-action-ink: #F7F3EC;
  --r-action-image: none;
  --r-action-glow: none;
  --r-accent: #A88A5C;
  --r-accent-ink: #7A5F36;
  --r-link: #6B4F2E;
  --r-success: #476338;
  --r-warning: #83621C;
  --r-danger: #9E3F2C;
  --r-info: #46525E;
  --r-star: #A88A5C;
  --r-star-glow: none;
  --r-scrim: rgb(42 35 28 / .32);
  --r-bar: rgb(251 249 245 / .86);
  --r-bar-text: var(--r-text);
  --r-blur: 16px;
  --r-shadow-1: 0 1px 2px rgb(42 35 28 / .05), 0 6px 20px -12px rgb(42 35 28 / .18);
  --r-shadow-2: 0 2px 6px rgb(42 35 28 / .06), 0 24px 48px -20px rgb(42 35 28 / .28);
  --r-page-image: none;
  --r-page-size: auto;
  --r-heading-image: none;
  --r-heading-fill: currentColor;
  --r-tab-active: var(--r-text);
  --r-tab-glow: none;
  --r-mark: #A88A5C;

  --r-tag-red: #A13D30; --r-tag-orange: #934C27; --r-tag-yellow: #765C1A; --r-tag-green: #4C6A3B;
  --r-tag-teal: #2F6764; --r-tag-blue: #3B5A80; --r-tag-purple: #68508A; --r-tag-pink: #93476A;
  --r-tag-maroon: #7E3337; --r-tag-steel: #56616B;
  --r-tag-tint: 12%;
  --r-trip-work: #46525E; --r-trip-personal: #93476A; --r-trip-family: #83621C; --r-glow-size: 0px;

  --r-tile-realm: #E9E2D6;   --r-tile-realm-ink: #A88A5C;
  --r-tile-tasks: #2F3B2E;   --r-tile-tasks-ink: #F3EEE5;
  --r-tile-trips: #E6DED1;   --r-tile-trips-ink: #2A231C;
  --r-tile-recipes: #6B4A32; --r-tile-recipes-ink: #F3EEE5;
  --r-tile-bar: #2a211a; --r-tile-bar-ink: #edb081;
  --r-tile-cards: #2A231C;   --r-tile-cards-ink: #C7A673;
  --r-tile-subscriptions: #3F4A55; --r-tile-subscriptions-ink: #F3EEE5;
  --r-tile-expenses: #4A5A48;  --r-tile-expenses-ink: #F3EEE5;
  --r-tile-wellbeing: #5D4B66; --r-tile-wellbeing-ink: #F3EEE5;
  --r-tile-inbox: #EDE6DA;   --r-tile-inbox-ink: #2A231C;
  --r-tile-ask: #F3EEE5;     --r-tile-ask-ink: #8C6D40;
  --r-tile-addressbook: #D9D0C2; --r-tile-addressbook-ink: #5C5246;
  --r-tile-edge: rgb(42 35 28 / .08);
  --r-tile-shadow: 0 1px 1px rgb(42 35 28 / .06), 0 4px 10px -4px rgb(42 35 28 / .22);

  /* Bootstrap, driven by the tokens (rgb triplets for its utilities) */
  --bs-primary-rgb: 42, 35, 28;
  --bs-secondary-rgb: 92, 82, 70;
  --bs-success-rgb: 71, 99, 56;
  --bs-warning-rgb: 131, 98, 28;
  --bs-danger-rgb: 158, 63, 44;
  --bs-info-rgb: 70, 82, 94;
  --bs-body-color-rgb: 42, 35, 28;
  --bs-secondary-color-rgb: 92, 82, 70;
  --bs-body-bg-rgb: 245, 241, 233;
  --bs-link-color-rgb: 107, 79, 46;
  --bs-link-hover-color-rgb: 42, 35, 28;
  --bs-emphasis-color-rgb: 42, 35, 28;
}

/* ------------------------------------------------------------ REALM Dark */
[data-theme="dark"] {
  color-scheme: dark;
  --r-canvas: #14110E;
  --r-surface: #1D1814;
  --r-surface-raised: #262019;
  --r-surface-sunken: #100D0B;
  --r-selected: #2C251E;
  --r-border: #3A3129;
  --r-border-strong: #7A6B5A;
  --r-text: #EEE6D9;
  --r-text-secondary: #BFB3A2;
  --r-text-tertiary: #9C907F;
  --r-action: #E8DECD;
  --r-action-hover: #F3EBDD;
  --r-action-ink: #1A1511;
  --r-action-image: none;
  --r-action-glow: none;
  --r-accent: #C7A673;
  --r-accent-ink: #C7A673;
  --r-link: #D6B887;
  --r-success: #9DBA8B;
  --r-warning: #D9B062;
  --r-danger: #DB8A72;
  --r-info: #A9B4BE;
  --r-star: #C7A673;
  --r-star-glow: none;
  --r-scrim: rgb(0 0 0 / .55);
  --r-bar: rgb(29 24 20 / .86);
  --r-bar-text: var(--r-text);
  --r-blur: 16px;
  --r-shadow-1: inset 0 1px 0 rgb(255 240 220 / .04);
  --r-shadow-2: 0 24px 48px -16px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 240 220 / .05);
  --r-page-image: none;
  --r-page-size: auto;
  --r-heading-image: none;
  --r-heading-fill: currentColor;
  --r-tab-active: var(--r-text);
  --r-tab-glow: none;
  --r-mark: #C7A673;

  --r-tag-red: #E0907F; --r-tag-orange: #E2A077; --r-tag-yellow: #D8BC6E; --r-tag-green: #A4BF8D;
  --r-tag-teal: #8EC1BA; --r-tag-blue: #9DB5D6; --r-tag-purple: #BBA6D6; --r-tag-pink: #DDA0BA;
  --r-tag-maroon: #CF9095; --r-tag-steel: #AEB7BF;
  --r-tag-tint: 16%;
  --r-trip-work: #A9B4BE; --r-trip-personal: #DDA0BA; --r-trip-family: #D9B062; --r-glow-size: 0px;

  --r-tile-realm: #2A221B;   --r-tile-realm-ink: #C7A673;
  --r-tile-tasks: #33402F;   --r-tile-tasks-ink: #EEE6D9;
  --r-tile-trips: #2E2620;   --r-tile-trips-ink: #E8DECD;
  --r-tile-recipes: #5A3E2A; --r-tile-recipes-ink: #EEE6D9;
  --r-tile-bar: #2a211a; --r-tile-bar-ink: #edb081;
  --r-tile-cards: #1A1511;   --r-tile-cards-ink: #C7A673;
  --r-tile-subscriptions: #37414B; --r-tile-subscriptions-ink: #EEE6D9;
  --r-tile-expenses: #3A4738;  --r-tile-expenses-ink: #EEE6D9;
  --r-tile-wellbeing: #493B50; --r-tile-wellbeing-ink: #EEE6D9;
  --r-tile-inbox: #2E2620;   --r-tile-inbox-ink: #E8DECD;
  --r-tile-ask: #2A221B;     --r-tile-ask-ink: #C7A673;
  --r-tile-addressbook: #2A231C; --r-tile-addressbook-ink: #9C907F;
  --r-tile-edge: rgb(238 230 217 / .08);
  --r-tile-shadow: inset 0 1px 0 rgb(255 240 220 / .06);

  --bs-primary-rgb: 232, 222, 205;
  --bs-secondary-rgb: 191, 179, 162;
  --bs-success-rgb: 157, 186, 139;
  --bs-warning-rgb: 217, 176, 98;
  --bs-danger-rgb: 219, 138, 114;
  --bs-info-rgb: 169, 180, 190;
  --bs-body-color-rgb: 238, 230, 217;
  --bs-secondary-color-rgb: 191, 179, 162;
  --bs-body-bg-rgb: 20, 17, 14;
  --bs-link-color-rgb: 214, 184, 135;
  --bs-link-hover-color-rgb: 238, 230, 217;
  --bs-emphasis-color-rgb: 238, 230, 217;
}

/* ------------------------------------------------------------ Midnight
   The original theme's palette and effects: near-black navy, glass, cyan to
   pink gradients, soft glows, a faint grid. */
[data-theme="midnight"] {
  color-scheme: dark;
  --r-canvas: #04040f;
  --r-surface: rgb(13 16 44 / .78);
  --r-surface-raised: rgb(22 26 64 / .9);
  --r-surface-sunken: rgb(6 8 26 / .9);
  --r-selected: rgb(110 140 255 / .14);
  --r-border: rgb(80 140 255 / .20);
  --r-border-strong: rgb(110 160 255 / .62);
  --r-text: #dfe5ff;
  --r-text-secondary: #b3bde0;
  --r-text-tertiary: #8e9bc4;
  --r-action: #22d3ee;
  --r-action-hover: #0891b2;
  --r-action-ink: #ffffff;
  --r-action-image: linear-gradient(90deg, #22d3ee, #ec4899);
  --r-action-glow: 0 0 18px rgb(139 92 246 / .40), inset 0 1px 0 rgb(255 255 255 / .18);
  --r-accent: #22d3ee;
  --r-accent-ink: #22d3ee;
  --r-link: #8fb8ff;
  --r-success: #4ade80;
  --r-warning: #fbbf24;
  --r-danger: #f87171;
  --r-info: #4fc3ff;
  --r-star: #fbbf24;
  --r-star-glow: 0 0 8px rgb(251 191 36 / .5);
  --r-scrim: rgb(0 0 8 / .6);
  --r-bar: rgb(8 10 28 / .72);
  --r-bar-text: #ffffff;
  --r-blur: 14px;
  --r-shadow-1: 0 0 22px rgb(30 150 255 / .10), inset 0 1px 0 rgb(255 255 255 / .04);
  --r-shadow-2: 0 1.25rem 3rem rgb(0 0 0 / .45), 0 0 22px rgb(30 150 255 / .12);
  --r-page-image:
    linear-gradient(rgb(90 130 255 / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(90 130 255 / .045) 1px, transparent 1px),
    radial-gradient(at 15% 10%, rgb(0 80 160 / .30) 0%, transparent 55%),
    radial-gradient(at 70% 70%, rgb(110 0 140 / .28) 0%, transparent 55%),
    radial-gradient(at 30% 95%, rgb(60 0 120 / .22) 0%, transparent 50%);
  --r-page-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%;
  --r-heading-image: linear-gradient(90deg, #22d3ee, #8b5cf6 55%, #ec4899);
  --r-heading-fill: transparent;
  --r-tab-active: #ffffff;
  --r-tab-glow: 0 0 10px rgb(120 150 255 / .9);
  --r-mark: #22d3ee;

  /* Outlook-style tag colours as Midnight always had them */
  --r-tag-red: #e5534b; --r-tag-orange: #f0883e; --r-tag-yellow: #d4a72c; --r-tag-green: #57ab5a;
  --r-tag-teal: #2fb5bf; --r-tag-blue: #539bf5; --r-tag-purple: #a371f7; --r-tag-pink: #e275ad;
  --r-tag-maroon: #a5424a; --r-tag-steel: #768390;
  --r-tag-tint: 14%;
  --r-trip-work: #3fa9ff; --r-trip-personal: #ec4899; --r-trip-family: #f59e0b; --r-glow-size: 8px;

  /* Neon outline chips: dark fill, gradient ring, glowing glyph */
  --r-tile-realm: rgb(10 12 34 / .92);   --r-tile-realm-ink: #22d3ee;   --r-tile-realm-ring: linear-gradient(135deg, #22d3ee, #ec4899);
  --r-tile-tasks: rgb(10 12 34 / .92);   --r-tile-tasks-ink: #3fe0ff;   --r-tile-tasks-ring: linear-gradient(135deg, #3fe0ff, #3b82f6);
  --r-tile-trips: rgb(10 12 34 / .92);   --r-tile-trips-ink: #fde047;   --r-tile-trips-ring: linear-gradient(135deg, #fde047, #fb7c2a);
  --r-tile-recipes: rgb(10 12 34 / .92); --r-tile-recipes-ink: #ff6fa8; --r-tile-recipes-ring: linear-gradient(135deg, #ff6fa8, #c24dff);
  --r-tile-bar: #2a211a; --r-tile-bar-ink: #edb081;
  --r-tile-cards: rgb(10 12 34 / .92);   --r-tile-cards-ink: #fb7185;   --r-tile-cards-ring: linear-gradient(135deg, #fb7185, #fbbf24);
  --r-tile-subscriptions: rgb(10 12 34 / .92); --r-tile-subscriptions-ink: #4ade80; --r-tile-subscriptions-ring: linear-gradient(135deg, #4ade80, #22d3ee);
  --r-tile-expenses: rgb(10 12 34 / .92); --r-tile-expenses-ink: #a3e635; --r-tile-expenses-ring: linear-gradient(135deg, #a3e635, #22d3ee);
  --r-tile-wellbeing: rgb(10 12 34 / .92); --r-tile-wellbeing-ink: #f0abfc; --r-tile-wellbeing-ring: linear-gradient(135deg, #f0abfc, #818cf8);
  --r-tile-inbox: rgb(10 12 34 / .92);   --r-tile-inbox-ink: #4fc3ff;   --r-tile-inbox-ring: linear-gradient(135deg, #4fc3ff, #b46cff);
  --r-tile-ask: rgb(10 12 34 / .92);     --r-tile-ask-ink: #c4b5fd;     --r-tile-ask-ring: linear-gradient(135deg, #c4b5fd, #f472b6);
  --r-tile-addressbook: rgb(10 12 34 / .92); --r-tile-addressbook-ink: #c4b5fd; --r-tile-addressbook-ring: linear-gradient(135deg, #c4b5fd, #f472b6);
  --r-tile-edge: transparent;
  --r-tile-shadow: 0 6px 18px rgb(70 110 255 / .35);

  --bs-primary-rgb: 34, 211, 238;
  --bs-secondary-rgb: 142, 155, 196;
  --bs-success-rgb: 74, 222, 128;
  --bs-warning-rgb: 251, 191, 36;
  --bs-danger-rgb: 248, 113, 113;
  --bs-info-rgb: 79, 195, 255;
  --bs-body-color-rgb: 223, 229, 255;
  --bs-secondary-color-rgb: 142, 155, 196;
  --bs-body-bg-rgb: 4, 4, 15;
  --bs-link-color-rgb: 143, 184, 255;
  --bs-link-hover-color-rgb: 223, 229, 255;
  --bs-emphasis-color-rgb: 223, 229, 255;
}

/* ------------------------------------------------------------ Bootstrap bridge
   Every Bootstrap component reads these, so existing markup follows the theme. */
:root, [data-theme] {
  --bs-body-font-family: var(--r-font-sans);
  --bs-body-bg: var(--r-canvas);
  --bs-body-color: var(--r-text);
  --bs-emphasis-color: var(--r-text);
  --bs-heading-color: var(--r-text);
  --bs-secondary-color: var(--r-text-secondary);
  --bs-tertiary-color: var(--r-text-tertiary);
  --bs-secondary-bg: var(--r-surface-sunken);
  --bs-tertiary-bg: var(--r-surface);
  --bs-border-color: var(--r-border);
  --bs-border-color-translucent: var(--r-border);
  --bs-link-color: var(--r-link);
  --bs-link-hover-color: var(--r-text);
  --bs-border-radius: var(--r-radius-md);
  --bs-border-radius-sm: var(--r-radius-sm);
  --bs-border-radius-lg: var(--r-radius-lg);
  --bs-focus-ring-color: color-mix(in srgb, var(--r-accent) 40%, transparent);
  --bs-primary: var(--r-action);
  --bs-success: var(--r-success);
  --bs-warning: var(--r-warning);
  --bs-danger: var(--r-danger);
  --bs-info: var(--r-info);
  --bs-primary-text-emphasis: var(--r-text);
  --bs-secondary-text-emphasis: var(--r-text-secondary);
  --bs-success-text-emphasis: var(--r-success);
  --bs-warning-text-emphasis: var(--r-warning);
  --bs-danger-text-emphasis: var(--r-danger);
  --bs-info-text-emphasis: var(--r-info);
  --bs-primary-bg-subtle: var(--r-selected);
  --bs-secondary-bg-subtle: var(--r-surface-sunken);
  --bs-success-bg-subtle: color-mix(in srgb, var(--r-success) 12%, var(--r-surface));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--r-warning) 12%, var(--r-surface));
  --bs-danger-bg-subtle: color-mix(in srgb, var(--r-danger) 12%, var(--r-surface));
  --bs-info-bg-subtle: color-mix(in srgb, var(--r-info) 12%, var(--r-surface));
  --bs-primary-border-subtle: var(--r-border-strong);
  --bs-secondary-border-subtle: var(--r-border);
  --bs-success-border-subtle: color-mix(in srgb, var(--r-success) 40%, transparent);
  --bs-warning-border-subtle: color-mix(in srgb, var(--r-warning) 40%, transparent);
  --bs-danger-border-subtle: color-mix(in srgb, var(--r-danger) 40%, transparent);
  --bs-info-border-subtle: color-mix(in srgb, var(--r-info) 40%, transparent);
  --bs-form-valid-color: var(--r-success);
  --bs-form-valid-border-color: var(--r-success);
  --bs-form-invalid-color: var(--r-danger);
  --bs-form-invalid-border-color: var(--r-danger);
}

/* ------------------------------------------------------------ appearance previews
   The Account page's samples of each look. Fixed on purpose: they show what
   you would get, so they don't follow the current theme. */
[class^="r-swatch-"] { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--r-border); }
.r-swatch-light { background: linear-gradient(135deg, #F5F1E9 50%, #2A231C 50%); }
.r-swatch-dark { background: linear-gradient(135deg, #1D1814 50%, #C7A673 50%); }
.r-swatch-midnight { background: linear-gradient(135deg, #04040f 45%, #22d3ee 45%, #ec4899); }
.r-swatch-system { background: linear-gradient(90deg, #F5F1E9 50%, #14110E 50%); }