/* Themes — a whole palette each, chosen in Settings.
 *
 * ---------------------------------------------------------------------------
 * HOW A THEME WORKS HERE, AND WHY IT IS ALMOST ALL COLOUR
 *
 * Nothing in this app names a colour. Every surface, every rule and every
 * border reads a token -- --panel, --ink, --line, --primary -- so replacing
 * the tokens replaces the appearance of every component at once, including
 * the ones written after this file. That is how light mode has always worked,
 * and it is why a theme is a palette rather than a thousand overrides: an
 * override list would be out of date the first time somebody adds a button.
 *
 * Each theme therefore ships two palettes, light and dark, because the theme
 * says what kind of thing the app is and the mode says how bright the room is.
 * Those are different questions and the reader gets to answer both.
 *
 * Specificity, since it is load-bearing: :root[data-ui="x"] and
 * :root[data-theme="dark"] weigh the same, so this file has to come after
 * app.css in the markup for a theme to win. The per-mode blocks below carry
 * both attributes and so outrank either on their own.
 *
 * FIVE THINGS EVERY THEME MUST SET, and the reason each one exists:
 *
 *   The grounds -- --drawer-ground, --compose-ground, --compose-ground-map,
 *   --welcome-ground, --lightbox-ground. These are not decoration. An
 *   installed iPhone paints the strip below the viewport itself, from
 *   theme-color, and the app sets theme-color from whichever ground is
 *   currently showing. A theme that changes the panels and forgets these gets
 *   a band along the bottom of the phone in the old theme's colour. Each one
 *   is the colour of a particular surface where it meets the bottom edge, so
 *   they are derived from that surface and not picked to look nice.
 *
 *   The map tokens -- --map-ocean, --map-land, --map-line, --map-label. The
 *   plain basemap is drawn from these, so a theme that skips them is a themed
 *   app around an unthemed map.
 *
 *   --primary-ink, which is the colour of text *on* --primary. Themes with a
 *   pale primary need dark ink here, and getting it wrong is invisible until
 *   somebody looks at a filled button.
 *
 *   --shadow and --glow, because a pastel theme with the dark theme's shadows
 *   reads as grubby rather than soft.
 *
 *   The three greys -- --ink, --ink-2, --ink-3 -- which have to stay far
 *   enough apart to keep hierarchy. Tinting them toward the theme's hue is
 *   most of what makes a palette read as designed rather than as a filter.
 *
 * TO REMOVE ONE THEME: delete its two blocks and its shape block here, and its
 * button in the theme grid in static/settings.html. Nothing else knows the
 * names apart from the allowlist in the two boot scripts.
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   Strawberry Milk — kawaii
   Pink milk and cocoa. Soft everything: the shadows are pink rather than grey,
   because a grey shadow under a pastel is what makes pastels look dirty.
   =========================================================================== */

:root[data-ui="strawberry"] {
  --bg:#FFF1F5;
  --panel:#FFFFFF;
  --panel-2:#FFE9F0;
  --panel-3:#FFDCE8;
  --ink:#4A2434;
  --ink-2:#8A5A6E;
  --ink-3:#B98A9C;
  --line:#FFD3E1;
  --line-2:#FFB8CF;
  --primary:#FF6B9D;
  --primary-ink:#FFFFFF;
  --secondary:#C084FC;
  --magenta:#FF8FC4;
  --shadow: 0 1px 2px rgba(196, 90, 130, .12), 0 16px 38px -22px rgba(196, 90, 130, .42);
  --glow: 0 0 0 1px rgba(255, 107, 157, .30), 0 10px 26px -12px rgba(255, 107, 157, .48);
  --map-ocean:#FFE3EC;
  --map-land:#FFF8FB;
  --map-line:#F3A9C4;
  --map-label:#B06B85;
  --scrim: rgba(74, 36, 52, .34);
  --grad: linear-gradient(135deg, #FF6B9D 0%, #C084FC 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,107,157,.16) 0%, rgba(192,132,252,.16) 100%);
  --grad-text: linear-gradient(120deg, #FF6B9D 0%, #C084FC 100%);
  --rim-here:#FF6B9D;
  --rim-map:#8FB8FF;
  /* Grounds, each read off the surface it belongs to. */
  --drawer-ground:#FFE9F0;
  --compose-ground:#FFD9E6;
  --compose-ground-map:#DFE7FF;
  --welcome-ground:#FFE3EE;
  --lightbox-ground:#3A1C28;
}

:root[data-ui="strawberry"][data-theme="dark"] {
  --bg:#1B0F18;
  --panel:#2A1622;
  --panel-2:#351C2C;
  --panel-3:#402236;
  --ink:#FFE9F2;
  --ink-2:#D9A8BE;
  --ink-3:#A97C90;
  --line:#432435;
  --line-2:#5A3049;
  --primary:#FF7FAE;
  --primary-ink:#3A1122;
  --secondary:#C69BFF;
  --shadow: 0 1px 2px rgba(10, 2, 7, .55), 0 18px 44px -20px rgba(40, 8, 24, .9);
  --glow: 0 0 0 1px rgba(255, 127, 174, .32), 0 8px 30px -8px rgba(198, 155, 255, .5);
  --map-ocean:#150B12;
  --map-land:#3A2030;
  --map-line:#6E4058;
  --map-label:#C68FA8;
  --scrim: rgba(14, 4, 10, .68);
  --drawer-ground:#351C2C;
  --compose-ground:#43223A;
  --compose-ground-map:#231C46;
  --welcome-ground:#2A1622;
  --lightbox-ground:#120810;
}

/* ===========================================================================
   Matcha Mochi — kawaii
   Green tea and peach. The warm accent is what stops it reading as a bank.
   =========================================================================== */

:root[data-ui="matcha"] {
  --bg:#F1FBF4;
  --panel:#FFFFFF;
  --panel-2:#E9F7EE;
  --panel-3:#DCF0E4;
  --ink:#1F3A2C;
  --ink-2:#4F7563;
  --ink-3:#84A594;
  --line:#D2EDDC;
  --line-2:#B6DFC6;
  --primary:#3FB98D;
  --primary-ink:#FFFFFF;
  --secondary:#FFA98F;
  --magenta:#FFB4A2;
  --shadow: 0 1px 2px rgba(31, 90, 66, .10), 0 16px 38px -22px rgba(31, 90, 66, .38);
  --glow: 0 0 0 1px rgba(63, 185, 141, .28), 0 10px 26px -12px rgba(255, 169, 143, .42);
  --map-ocean:#DCF0E6;
  --map-land:#F7FCF9;
  --map-line:#9CCBB1;
  --map-label:#5C8672;
  --scrim: rgba(23, 48, 36, .34);
  --grad: linear-gradient(135deg, #3FB98D 0%, #FFA98F 100%);
  --grad-soft: linear-gradient(135deg, rgba(63,185,141,.16) 0%, rgba(255,169,143,.16) 100%);
  --grad-text: linear-gradient(120deg, #2E9C74 0%, #FF8F70 100%);
  --rim-here:#3FB98D;
  --rim-map:#7FB6E8;
  --drawer-ground:#E9F7EE;
  --compose-ground:#D6EFE1;
  --compose-ground-map:#DAE9F7;
  --welcome-ground:#E2F4E9;
  --lightbox-ground:#16281E;
}

:root[data-ui="matcha"][data-theme="dark"] {
  --bg:#0C1711;
  --panel:#13251B;
  --panel-2:#192F23;
  --panel-3:#20392C;
  --ink:#E4F7EC;
  --ink-2:#9EC6AF;
  --ink-3:#729684;
  --line:#22402F;
  --line-2:#2F553F;
  --primary:#5FD5A6;
  --primary-ink:#08251A;
  --secondary:#FFB79E;
  --shadow: 0 1px 2px rgba(0, 8, 4, .55), 0 18px 44px -20px rgba(2, 20, 12, .9);
  --glow: 0 0 0 1px rgba(95, 213, 166, .30), 0 8px 30px -8px rgba(255, 183, 158, .42);
  --map-ocean:#08120D;
  --map-land:#1D3729;
  --map-line:#3C6A51;
  --map-label:#84BB9E;
  --scrim: rgba(4, 12, 8, .68);
  --drawer-ground:#192F23;
  --compose-ground:#1F3A2C;
  --compose-ground-map:#193040;
  --welcome-ground:#13251B;
  --lightbox-ground:#07110C;
}

/* ===========================================================================
   Midnight Neon — cool
   Near-black with cyan and magenta. The one theme where the glow is the point,
   so the shadows carry hue instead of being neutral darkness.
   =========================================================================== */

:root[data-ui="midnight"] {
  --bg:#EDF1F7;
  --panel:#FFFFFF;
  --panel-2:#F2F6FC;
  --panel-3:#E4EBF5;
  --ink:#0A1420;
  --ink-2:#42576E;
  --ink-3:#71879F;
  --line:#D9E3EF;
  --line-2:#C2D0E2;
  --primary:#0891B2;
  --primary-ink:#FFFFFF;
  --secondary:#DB2777;
  --magenta:#F472B6;
  --shadow: 0 1px 2px rgba(8, 20, 34, .10), 0 16px 38px -22px rgba(8, 20, 34, .40);
  --glow: 0 0 0 1px rgba(8, 145, 178, .30), 0 10px 26px -12px rgba(219, 39, 119, .34);
  --map-ocean:#D5E2EF;
  --map-land:#F8FBFE;
  --map-line:#9DB3CB;
  --map-label:#5B7391;
  --scrim: rgba(8, 18, 32, .40);
  --grad: linear-gradient(135deg, #0891B2 0%, #DB2777 100%);
  --grad-soft: linear-gradient(135deg, rgba(8,145,178,.16) 0%, rgba(219,39,119,.16) 100%);
  --grad-text: linear-gradient(120deg, #0891B2 0%, #DB2777 100%);
  --rim-here:#DB2777;
  --rim-map:#0891B2;
  --drawer-ground:#F2F6FC;
  --compose-ground:#DCE6F4;
  --compose-ground-map:#D7E9F2;
  --welcome-ground:#E7EDF6;
  --lightbox-ground:#0A1420;
}

:root[data-ui="midnight"][data-theme="dark"] {
  --bg:#04050A;
  --panel:#0A0E18;
  --panel-2:#101725;
  --panel-3:#171F33;
  --ink:#E8F7FF;
  --ink-2:#8FA8C4;
  --ink-3:#5B7391;
  --line:#17203A;
  --line-2:#22304F;
  --primary:#22D3EE;
  --primary-ink:#04222A;
  --secondary:#F472B6;
  --shadow: 0 1px 2px rgba(0,0,0,.7), 0 18px 44px -20px rgba(0, 20, 30, .95);
  --glow: 0 0 0 1px rgba(34, 211, 238, .38), 0 8px 34px -8px rgba(244, 114, 182, .55);
  --map-ocean:#03050B;
  --map-land:#131C30;
  --map-line:#2F4A70;
  --map-label:#7C9AC4;
  --scrim: rgba(1, 3, 8, .72);
  --drawer-ground:#101725;
  --compose-ground:#16213A;
  --compose-ground-map:#0C2438;
  --welcome-ground:#0A0E18;
  --lightbox-ground:#03050A;
}

/* ===========================================================================
   Arctic Frost — cool
   Ice and steel. Almost no saturation anywhere except the one blue, which is
   what makes the blue read as cold rather than as corporate.
   =========================================================================== */

:root[data-ui="frost"] {
  --bg:#F2F7FB;
  --panel:#FFFFFF;
  --panel-2:#EBF3F9;
  --panel-3:#DEEAF3;
  --ink:#0F2436;
  --ink-2:#49647B;
  --ink-3:#7E96AB;
  --line:#DAE7F0;
  --line-2:#C3D6E4;
  --primary:#0EA5E9;
  --primary-ink:#FFFFFF;
  --secondary:#64748B;
  --magenta:#7DD3FC;
  --shadow: 0 1px 2px rgba(15, 36, 54, .08), 0 16px 38px -22px rgba(15, 36, 54, .34);
  --glow: 0 0 0 1px rgba(14, 165, 233, .26), 0 10px 26px -12px rgba(14, 165, 233, .34);
  --map-ocean:#D3E6F2;
  --map-land:#F9FCFE;
  --map-line:#A6C2D6;
  --map-label:#5E7C93;
  --scrim: rgba(12, 30, 46, .36);
  --grad: linear-gradient(135deg, #0EA5E9 0%, #7DD3FC 100%);
  --grad-soft: linear-gradient(135deg, rgba(14,165,233,.16) 0%, rgba(125,211,252,.18) 100%);
  --grad-text: linear-gradient(120deg, #0284C7 0%, #38BDF8 100%);
  --rim-here:#0EA5E9;
  --rim-map:#94A3B8;
  --drawer-ground:#EBF3F9;
  --compose-ground:#DCEAF5;
  --compose-ground-map:#D5E6F4;
  --welcome-ground:#E4EFF7;
  --lightbox-ground:#0C1B27;
}

:root[data-ui="frost"][data-theme="dark"] {
  --bg:#060E15;
  --panel:#0C1822;
  --panel-2:#12212E;
  --panel-3:#192C3C;
  --ink:#E6F3FB;
  --ink-2:#93B0C6;
  --ink-3:#65869E;
  --line:#17293A;
  --line-2:#22394E;
  --primary:#38BDF8;
  --primary-ink:#04222F;
  --secondary:#94A3B8;
  --shadow: 0 1px 2px rgba(0, 4, 8, .6), 0 18px 44px -20px rgba(0, 12, 22, .9);
  --glow: 0 0 0 1px rgba(56, 189, 248, .30), 0 8px 30px -8px rgba(56, 189, 248, .42);
  --map-ocean:#040A10;
  --map-land:#152735;
  --map-line:#31536E;
  --map-label:#7FA3BE;
  --scrim: rgba(2, 8, 14, .70);
  --drawer-ground:#12212E;
  --compose-ground:#173042;
  --compose-ground-map:#132B3E;
  --welcome-ground:#0C1822;
  --lightbox-ground:#03080D;
}

/* ===========================================================================
   Divine — golden white
   Ivory and gold leaf. The hard part of a gold theme is that gold is a mid
   tone: it cannot carry text on white and it cannot be the ink. So it is the
   edge and the accent, the ink is a deep umber, and --primary-ink is dark
   because white on gold fails contrast at every size that matters.
   =========================================================================== */

:root[data-ui="divine"] {
  --bg:#FBF7EE;
  --panel:#FFFDF8;
  --panel-2:#F7F1E3;
  --panel-3:#F0E7D2;
  --ink:#332914;
  --ink-2:#6B5A34;
  --ink-3:#9A8858;
  --line:#EADFC4;
  --line-2:#DCCBA2;
  --primary:#B8912B;
  --primary-ink:#FFFDF5;
  --secondary:#D9BC63;
  --magenta:#E8CE86;
  --shadow: 0 1px 2px rgba(120, 96, 34, .12), 0 16px 38px -22px rgba(120, 96, 34, .40);
  --glow: 0 0 0 1px rgba(184, 145, 43, .34), 0 10px 30px -12px rgba(217, 188, 99, .55);
  --map-ocean:#EFE6D0;
  --map-land:#FEFCF6;
  --map-line:#CDB77E;
  --map-label:#8A7540;
  --scrim: rgba(52, 41, 18, .34);
  --grad: linear-gradient(135deg, #C9A227 0%, #F0DDA0 100%);
  --grad-soft: linear-gradient(135deg, rgba(201,162,39,.18) 0%, rgba(240,221,160,.22) 100%);
  --grad-text: linear-gradient(120deg, #9C7A16 0%, #D9BC63 100%);
  --rim-here:#C9A227;
  --rim-map:#B8B08C;
  --drawer-ground:#F7F1E3;
  --compose-ground:#F0E6CE;
  --compose-ground-map:#E8E4D4;
  --welcome-ground:#F5EEDD;
  --lightbox-ground:#2A2211;
}

:root[data-ui="divine"][data-theme="dark"] {
  --bg:#12100A;
  --panel:#1C1810;
  --panel-2:#252015;
  --panel-3:#30291B;
  --ink:#FBF3DE;
  --ink-2:#CBB88B;
  --ink-3:#9A8B62;
  --line:#332B1C;
  --line-2:#463B26;
  --primary:#E3C25A;
  --primary-ink:#241C08;
  --secondary:#C9A227;
  --shadow: 0 1px 2px rgba(0,0,0,.6), 0 18px 44px -20px rgba(30, 22, 4, .92);
  --glow: 0 0 0 1px rgba(227, 194, 90, .34), 0 8px 32px -8px rgba(227, 194, 90, .48);
  --map-ocean:#0B0A06;
  --map-land:#241E12;
  --map-line:#544425;
  --map-label:#B9A470;
  --scrim: rgba(10, 8, 3, .70);
  --drawer-ground:#252015;
  --compose-ground:#332B18;
  --compose-ground-map:#2B2A1C;
  --welcome-ground:#1C1810;
  --lightbox-ground:#0A0805;
}

/* ===========================================================================
   Shape
   ---------------------------------------------------------------------------
   The palettes above do the work -- every component in the app is built from
   those tokens, so replacing them replaces the appearance of all of them at
   once. What a palette cannot say is how round a thing is, and roundness is
   most of the difference between cute and cold. These are the few tokens that
   are not colour, set per theme, and they reach every component for the same
   reason the colours do.
   =========================================================================== */

/* Kawaii: everything is a lozenge. Larger radii on the small parts than the
   large ones, proportionally, which is what reads as soft rather than as
   merely rounded. */
:root[data-ui="strawberry"],
:root[data-ui="matcha"] {
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
}

/* Midnight: the opposite. Tight radii and a hard edge, so the neon reads as
   light on a surface rather than as a glow around a pill. */
:root[data-ui="midnight"] {
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
}

/* Frost and Divine keep the app's own geometry: one is about clarity and the
   other about a thin gold line, and neither is helped by changing the shape. */

/* The gold line itself, which is the whole of Divine that is not colour.
   A border token cannot express it, because it is a highlight along one edge
   rather than a colour on four -- the same construction the glass theme uses
   for its lit edge, in leaf rather than in light. */
:root[data-ui="divine"] .card,
:root[data-ui="divine"] .searchbox,
:root[data-ui="divine"] .modal-card,
:root[data-ui="divine"] .compose-sheet,
:root[data-ui="divine"] .sset.card,
:root[data-ui="divine"] .dash-card {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Midnight's rims glow instead. Scoped to the same short list rather than to
   everything: a page where every edge glows is a page with no hierarchy. */
:root[data-ui="midnight"][data-theme="dark"] .card:hover,
:root[data-ui="midnight"][data-theme="dark"] .searchbox:focus-within {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: var(--shadow), 0 0 18px -6px color-mix(in srgb, var(--primary) 70%, transparent);
}