/* DDC design tokens: the colours, type and Liquid Glass settings used by DDC Email.
   Drop this file in first, then liquid-glass.css. Light is the default; dark mode is
   html[data-theme='dark']. How see-through the glass is follows html[data-glass]
   (ultra | clear (default, no attribute) | frosted | tinted). */

:root {
  /* Surfaces and text */
  --bg: #f2f5fb;
  --surface: #ffffff;
  --soft: #edf3ff;
  --heading: #13213a;
  --text: #1c2b45;
  --copy: #405b82;
  --muted: #51617e;
  --border: #d5dfef;
  --control: #afc1df;

  /* Brand */
  --primary: #2851c5;
  --primary-hover: #264bb0;
  --primary-text: #ffffff;
  --accent: #3159c4;
  --cyan: #7dd0dc;
  --navy: #13213a;

  /* Labels */
  --tag: #e5eeff;
  --tag-text: #2448aa;
  --tag-alt: #e2f6f8;
  --tag-alt-text: #1d6672;

  /* Status */
  --ok: #17784b;
  --ok-bg: #e2f5ea;
  --warning-bg: #fff6e5;
  --warning-text: #7a4b00;
  --danger: #b4232f;
  --danger-bg: #fcf0ef;

  /* Avatars (initials on rounded squares) */
  --avatar-0: #2851c5;
  --avatar-1: #7dd0dc;
  --avatar-1-text: #0c3440;
  --avatar-2: #4573de;
  --avatar-3: #3a2f9e;

  /* Type: no web font is bundled. Macs show Avenir Next; elsewhere Inter if installed. */
  --font: 'Avenir Next', Avenir, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shape */
  --radius-card: 22px;
  --radius-dialog: 32px;
  --radius-field: 12px;
  --radius-small: 9px;
  --radius-pill: 999px;

  color-scheme: light;
}

html[data-theme='dark'] {
  --bg: #0b1322;
  --surface: #152238;
  --soft: #1a2a43;
  --heading: #edf3ff;
  --text: #dbe5f6;
  --copy: #cfdaed;
  --muted: #aebed8;
  --border: #334966;
  --control: #6982a6;
  --primary: #2851c5;
  --primary-hover: #315bd4;
  --accent: #9bb6ff;
  --cyan: #66e4eb;
  --navy: #070d18;
  --tag: #253d63;
  --tag-text: #b8ccff;
  --tag-alt: #123b48;
  --tag-alt-text: #89e3f1;
  --ok: #8be3b3;
  --ok-bg: #173a2c;
  --warning-bg: #46351c;
  --warning-text: #f3d29c;
  --danger: #ffb8bb;
  --danger-bg: #45272f;
  --avatar-1: #66e4eb;
  color-scheme: dark;
}

/* ---- Motion: springs as CSS linear() curves ---- */
:root {
  /* Lively, a small overshoot: selections, buttons, switches. */
  --spring: linear(0, 0.05, 0.164, 0.313, 0.471, 0.622, 0.755, 0.864, 0.949, 1.01, 1.049, 1.072, 1.08, 1.079, 1.071, 1.06, 1.047, 1.035, 1.024, 1.014, 1.006, 1.001, 0.997, 0.995, 0.994, 0.994, 0.994, 0.995, 0.996, 0.997, 1);
  /* Calm, for big things: dialogs and sheets. */
  --spring-calm: linear(0, 0.04, 0.131, 0.249, 0.376, 0.501, 0.615, 0.714, 0.797, 0.865, 0.917, 0.957, 0.985, 1.004, 1.016, 1.023, 1.025, 1.025, 1.024, 1.021, 1.018, 1.014, 1.011, 1.009, 1.006, 1.004, 1.003, 1.002, 1.001, 1, 1);
}

/* ---- Liquid Glass ---- */
:root {
  --g-a: 0.36;            /* fill opacity of light glass (bars, buttons on content) */
  --g-blur: 9px;          /* backdrop blur */
  --g-ta: 0.68;           /* opacity of smoked (navy-tinted) glass, e.g. a side menu */
  --g-dialog: 0.74;       /* dialogs are more tinted, for reading */
  --g-sheet: 0.82;        /* side/bottom sheets with forms, even more */
  --g-fill-rgb: 255 255 255;
  --g-tint-rgb: 15 28 56;
  --g-rim-hi: rgb(255 255 255 / 0.95);
  --g-rim-lo: rgb(255 255 255 / 0.3);
  --g-edge: rgb(14 26 50 / 0.16);
  --g-inner: inset 0 1px 0.5px rgb(255 255 255 / 0.85), inset 0 0 16px rgb(255 255 255 / 0.32);
  --g-shadow-s: 0 1px 2px rgb(14 26 50 / 0.07), 0 6px 18px -6px rgb(14 26 50 / 0.18);
  --g-shadow-l: 0 2px 6px rgb(14 26 50 / 0.05), 0 26px 60px -16px rgb(14 26 50 / 0.3);
  --g-sheen: 0.6;
  --g-recess: rgb(118 132 160 / 0.15);
  --g-thumb: linear-gradient(180deg, #fff, rgb(255 255 255 / 0.88));
  --g-thumb-shadow: 0 0 0 0.5px rgb(14 26 50 / 0.12), 0 2px 7px rgb(14 26 50 / 0.14), inset 0 1px 0 #fff;
  --btn-fill: linear-gradient(180deg, rgb(255 255 255 / 0.96), rgb(243 246 252 / 0.92));
  --btn-fill-hover: linear-gradient(180deg, #fff, rgb(248 250 254 / 0.96));
  --btn-shadow: 0 0 0 0.5px rgb(14 26 50 / 0.2), 0 1px 2px rgb(14 26 50 / 0.08), 0 4px 12px -4px rgb(14 26 50 / 0.14), inset 0 1px 0 #fff;
  --btn-shadow-hover: 0 0 0 0.5px rgb(14 26 50 / 0.24), 0 2px 4px rgb(14 26 50 / 0.08), 0 8px 18px -6px rgb(14 26 50 / 0.2), inset 0 1px 0 #fff;
  --plain-fill: rgb(118 132 160 / 0.13);
  --plain-fill-hover: rgb(118 132 160 / 0.22);
  /* Soft brand-colour wash behind everything, so the glass has something to show. */
  --ambient: radial-gradient(560px 460px at 0 0, rgb(40 81 197 / 0.26), transparent 70%), radial-gradient(520px 560px at 0 100%, rgb(125 208 220 / 0.34), transparent 70%), radial-gradient(900px 620px at 100% -12%, rgb(125 208 220 / 0.16), transparent 62%);
}

/* The four see-through levels (like the Liquid Glass setting on iPhone). */
html[data-glass='ultra'] { --g-a: 0.16; --g-blur: 5px; --g-ta: 0.5; --g-dialog: 0.62; --g-sheet: 0.72; }
html[data-glass='frosted'] { --g-a: 0.6; --g-blur: 18px; --g-ta: 0.86; --g-dialog: 0.86; --g-sheet: 0.9; }
html[data-glass='tinted'] { --g-a: 0.84; --g-blur: 28px; --g-ta: 0.95; --g-dialog: 0.95; --g-sheet: 0.96; }

html[data-theme='dark'] {
  --g-a: 0.34;
  --g-fill-rgb: 30 45 72;
  --g-tint-rgb: 9 16 30;
  --g-rim-hi: rgb(255 255 255 / 0.4);
  --g-rim-lo: rgb(255 255 255 / 0.07);
  --g-edge: rgb(0 0 0 / 0.7);
  --g-inner: inset 0 1px 0.5px rgb(255 255 255 / 0.14), inset 0 0 16px rgb(255 255 255 / 0.04);
  --g-shadow-s: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.5);
  --g-shadow-l: 0 2px 6px rgb(0 0 0 / 0.25), 0 30px 70px -14px rgb(0 0 0 / 0.65);
  --g-sheen: 0.16;
  --g-recess: rgb(0 0 0 / 0.28);
  --g-thumb: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.12));
  --g-thumb-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.6), 0 2px 7px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.2);
  --btn-fill: linear-gradient(180deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.06));
  --btn-fill-hover: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.09));
  --btn-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.75), 0 4px 12px -4px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 0.5px rgb(255 255 255 / 0.05);
  --btn-shadow-hover: 0 0 0 0.5px rgb(0 0 0 / 0.75), 0 8px 18px -6px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 0.5px rgb(255 255 255 / 0.08);
  --plain-fill: rgb(255 255 255 / 0.08);
  --plain-fill-hover: rgb(255 255 255 / 0.14);
  --ambient: radial-gradient(560px 460px at 0 0, rgb(64 110 255 / 0.2), transparent 70%), radial-gradient(520px 560px at 0 100%, rgb(102 228 235 / 0.13), transparent 70%), radial-gradient(900px 620px at 100% -12%, rgb(80 120 255 / 0.12), transparent 62%);
}
html[data-theme='dark'][data-glass='ultra'] { --g-a: 0.16; }
html[data-theme='dark'][data-glass='frosted'] { --g-a: 0.55; }
html[data-theme='dark'][data-glass='tinted'] { --g-a: 0.88; }

/* System settings always win. */
@media (prefers-reduced-transparency: reduce) {
  :root, html[data-theme='dark'], html[data-glass], html[data-theme='dark'][data-glass] { --g-a: 1; --g-ta: 1; --g-dialog: 1; --g-sheet: 1; }
}
@media (prefers-contrast: more) {
  :root { --g-a: 1; --g-ta: 1; --g-edge: rgb(14 26 50 / 0.6); }
  html[data-theme='dark'] { --g-edge: rgb(255 255 255 / 0.5); }
}