/*
 * TKC Stride primitive tokens.
 * Source: Figma "Client Calendar for Coaches" → Primitive collection (Value mode).
 * Scoped to [data-stride-theme] so these never leak into the existing product.
 */

[data-stride-theme] {
  /* Color / transparent-gray */
  --stride-color-transparent-gray-0: #17171600;
  --stride-color-transparent-gray-25: #17171603;
  --stride-color-transparent-gray-50: #17171609;
  --stride-color-transparent-gray-100: #1717160e;
  --stride-color-transparent-gray-200: #17171621;
  --stride-color-transparent-gray-300: #17171634;
  --stride-color-transparent-gray-400: #1717164f;
  --stride-color-transparent-gray-500: #1717166f;
  --stride-color-transparent-gray-550: #17171686;
  --stride-color-transparent-gray-600: #1717169d;
  --stride-color-transparent-gray-700: #171716b9;
  --stride-color-transparent-gray-800: #171716d5;
  --stride-color-transparent-gray-900: #171716e9;
  --stride-color-transparent-gray-950: #171716f5;
  --stride-color-transparent-gray-1000: #171716;

  /* Color / transparent-white */
  --stride-color-transparent-white-0: #ffffff00;
  --stride-color-transparent-white-25: #ffffff0a;
  --stride-color-transparent-white-50: #ffffff16;
  --stride-color-transparent-white-100: #ffffff2a;
  --stride-color-transparent-white-200: #ffffff46;
  --stride-color-transparent-white-300: #ffffff62;
  --stride-color-transparent-white-400: #ffffff79;
  --stride-color-transparent-white-500: #ffffff90;
  --stride-color-transparent-white-550: #ffffffb0;
  --stride-color-transparent-white-600: #ffffffcb;
  --stride-color-transparent-white-700: #ffffffde;
  --stride-color-transparent-white-800: #ffffffec;
  --stride-color-transparent-white-900: #fffffff6;
  --stride-color-transparent-white-950: #fffffffc;
  --stride-color-transparent-white-1000: #ffffff;

  /* Color / brand-blue */
  --stride-color-brand-blue-50: #eaf3ff;
  --stride-color-brand-blue-100: #d8e9ff;
  --stride-color-brand-blue-200: #bbd7ff;
  --stride-color-brand-blue-300: #91c1ff;
  --stride-color-brand-blue-400: #61a5ff;
  --stride-color-brand-blue-500: #2e88f5;
  --stride-color-brand-blue-600: #0771ee;
  --stride-color-brand-blue-700: #0666d6;
  --stride-color-brand-blue-800: #0558b8;
  --stride-color-brand-blue-900: #044a99;
  --stride-color-brand-blue-950: #033b7a;

  /* Color / transparent-brand-blue (alpha of brand-blue-600). Figma stores
   * these semantic fills as a primitive + opacity rather than a dedicated
   * primitive, so the composites live here and semantic.css keeps aliasing
   * `--stride-color-*` only:
   *   100 = 10% (#0771ee1a) — bg/brand/bg-brand-surface (selected row rest)
   *   300 = 20% (#0771ee33) — bg/brand/bg-brand-overlay (selected row hover;
   *                           also the Calendar V2 DnD day-cell dropzone) */
  --stride-color-transparent-brand-blue-100: #0771ee1a;
  --stride-color-transparent-brand-blue-300: #0771ee33;

  /* Color / transparent-warning — Figma semantic fills that alias a warning
   * primitive plus opacity rather than a dedicated primitive:
   *   100 = warning-100 @ 80%  (bg-surface-highlight, Light)
   *   500 = warning-500 @ 60%  (bdr-highlight, Dark)
   *   700 = warning-700 @ 40%  (bg-surface-highlight, Dark)
   *   900 = warning-900 @ 50%  (bg-surface-highlight-muted, Dark) */
  --stride-color-transparent-warning-100: #ffedc2cc;
  --stride-color-transparent-warning-500: #d99a2299;
  --stride-color-transparent-warning-700: #99671566;
  --stride-color-transparent-warning-900: #60421680;

  /* Color / transparent-danger — danger-900 @ 50% (bg-danger-surface, Dark) */
  --stride-color-transparent-danger-900: #75201a80;

  /* Color / transparent-success — success-900 @ 50% (bg-success-surface, Dark) */
  --stride-color-transparent-success-900: #154a2b80;

  /* Color / transparent-accent-<family> — accent ramp step @ opacity, the
   * Figma bg/<accent>/bg-<accent>-surface-transparent fills (Light | Dark):
   *   purple 200 @56.5% | 700 @33%     olive  200 @55%   | 900 @58.8%
   *   cyan   300 @34.7% | 900 @67.9%   amber  200 @58.1% | 900 @62.9%
   *   indigo 300 @33.2% | 700 @39.4%   brick  600 @16%   | 700 @35.8%
   *   slate  200 @57.2% | 100 @4.2%    yellow 500 @17.5% | 900 @62.6%
   *   pink   200 @56.8% | 700 @33.6% */
  --stride-color-transparent-accent-purple-200: #e3d6f190;
  --stride-color-transparent-accent-purple-700: #70419d54;
  --stride-color-transparent-accent-olive-200: #c6decd8c;
  --stride-color-transparent-accent-olive-900: #24453196;
  --stride-color-transparent-accent-cyan-300: #9bc7d358;
  --stride-color-transparent-accent-cyan-900: #1f4650ad;
  --stride-color-transparent-accent-amber-200: #ecd7c394;
  --stride-color-transparent-accent-amber-900: #5d3c2ca0;
  --stride-color-transparent-accent-indigo-300: #b4b9dc55;
  --stride-color-transparent-accent-indigo-700: #53589664;
  --stride-color-transparent-accent-brick-600: #b8485829;
  --stride-color-transparent-accent-brick-700: #993c4b5b;
  --stride-color-transparent-accent-slate-100: #eeeeed0b;
  --stride-color-transparent-accent-slate-200: #e1e1e092;
  --stride-color-transparent-accent-yellow-500: #c2a73a2d;
  --stride-color-transparent-accent-yellow-900: #41391ba0;
  --stride-color-transparent-accent-pink-200: #f1d6e991;
  --stride-color-transparent-accent-pink-700: #9d418156;

  /* Color / danger */
  --stride-color-danger-50: #fff0ee;
  --stride-color-danger-100: #ffdcd7;
  --stride-color-danger-200: #ffbdb5;
  --stride-color-danger-300: #ff968b;
  --stride-color-danger-400: #f56f62;
  --stride-color-danger-500: #e84b3d;
  --stride-color-danger-600: #d9362b;
  --stride-color-danger-700: #ba2b22;
  --stride-color-danger-800: #98251e;
  --stride-color-danger-900: #75201a;

  /* Color / success */
  --stride-color-success-50: #ecf8f0;
  --stride-color-success-100: #d6f0de;
  --stride-color-success-200: #b1e2c0;
  --stride-color-success-300: #83d09b;
  --stride-color-success-400: #5cbd79;
  --stride-color-success-500: #3ba962;
  --stride-color-success-600: #278f4f;
  --stride-color-success-700: #207640;
  --stride-color-success-800: #1a5e35;
  --stride-color-success-900: #154a2b;

  /* Color / warning */
  --stride-color-warning-50: #fff8e8;
  --stride-color-warning-100: #ffedc2;
  --stride-color-warning-200: #ffdc91;
  --stride-color-warning-300: #fbc75f;
  --stride-color-warning-400: #efb137;
  --stride-color-warning-500: #d99a22;
  --stride-color-warning-600: #bd8016;
  --stride-color-warning-700: #996715;
  --stride-color-warning-800: #795216;
  --stride-color-warning-900: #604216;

  /* Color / info — same hexes as brand-blue, including the 950 step */
  --stride-color-info-50: #eaf3ff;
  --stride-color-info-100: #d8e9ff;
  --stride-color-info-200: #bbd7ff;
  --stride-color-info-300: #91c1ff;
  --stride-color-info-400: #61a5ff;
  --stride-color-info-500: #2e88f5;
  --stride-color-info-600: #0771ee;
  --stride-color-info-700: #0666d6;
  --stride-color-info-800: #0558b8;
  --stride-color-info-900: #044a99;
  --stride-color-info-950: #033b7a;

  /* Color / accent-purple */
  --stride-color-accent-purple-50: #f7f4fb;
  --stride-color-accent-purple-100: #efe8f7;
  --stride-color-accent-purple-200: #e3d6f1;
  --stride-color-accent-purple-300: #d2bbea;
  --stride-color-accent-purple-400: #bc99e2;
  --stride-color-accent-purple-500: #a474d2;
  --stride-color-accent-purple-600: #8b55bd;
  --stride-color-accent-purple-700: #70419d;
  --stride-color-accent-purple-800: #593a78;
  --stride-color-accent-purple-900: #45305d;
  --stride-color-accent-purple-950: #322245;

  /* Color / accent-olive */
  --stride-color-accent-olive-50: #f0f7f2;
  --stride-color-accent-olive-100: #e0ede3;
  --stride-color-accent-olive-200: #c6decd;
  --stride-color-accent-olive-300: #a3cdae;
  --stride-color-accent-olive-400: #7cb78b;
  --stride-color-accent-olive-500: #599f6e;
  --stride-color-accent-olive-600: #43895a;
  --stride-color-accent-olive-700: #346f4a;
  --stride-color-accent-olive-800: #2d563d;
  --stride-color-accent-olive-900: #244531;
  --stride-color-accent-olive-950: #1b3326;

  /* Color / accent-cyan */
  --stride-color-accent-cyan-50: #eef6f9;
  --stride-color-accent-cyan-100: #dcecf0;
  --stride-color-accent-cyan-200: #bedde6;
  --stride-color-accent-cyan-300: #9bc7d3;
  --stride-color-accent-cyan-400: #73afbf;
  --stride-color-accent-cyan-500: #5195a8;
  --stride-color-accent-cyan-600: #3b8093;
  --stride-color-accent-cyan-700: #2e6a7a;
  --stride-color-accent-cyan-800: #265764;
  --stride-color-accent-cyan-900: #1f4650;
  --stride-color-accent-cyan-950: #16363f;

  /* Color / accent-amber */
  --stride-color-accent-amber-50: #faf4ef;
  --stride-color-accent-amber-100: #f4e8dc;
  --stride-color-accent-amber-200: #ecd7c3;
  --stride-color-accent-amber-300: #e6c09d;
  --stride-color-accent-amber-400: #dca171;
  --stride-color-accent-amber-500: #cc844f;
  --stride-color-accent-amber-600: #b76d3b;
  --stride-color-accent-amber-700: #995a35;
  --stride-color-accent-amber-800: #744a33;
  --stride-color-accent-amber-900: #5d3c2c;
  --stride-color-accent-amber-950: #442d23;

  /* Color / accent-indigo */
  --stride-color-accent-indigo-50: #f3f3f9;
  --stride-color-accent-indigo-100: #e6e8f3;
  --stride-color-accent-indigo-200: #d1d4e8;
  --stride-color-accent-indigo-300: #b4b9dc;
  --stride-color-accent-indigo-400: #949bcf;
  --stride-color-accent-indigo-500: #777dbe;
  --stride-color-accent-indigo-600: #6269af;
  --stride-color-accent-indigo-700: #535896;
  --stride-color-accent-indigo-800: #484c76;
  --stride-color-accent-indigo-900: #3c3f60;
  --stride-color-accent-indigo-950: #2d3149;

  /* Color / accent-brick */
  --stride-color-accent-brick-50: #f9f2f2;
  --stride-color-accent-brick-100: #f4e2e4;
  --stride-color-accent-brick-200: #eacbce;
  --stride-color-accent-brick-300: #e4a7af;
  --stride-color-accent-brick-400: #db828d;
  --stride-color-accent-brick-500: #cd606e;
  --stride-color-accent-brick-600: #b84858;
  --stride-color-accent-brick-700: #993c4b;
  --stride-color-accent-brick-800: #753741;
  --stride-color-accent-brick-900: #5e2f38;
  --stride-color-accent-brick-950: #45232b;

  /* Color / accent-slate */
  --stride-color-accent-slate-50: #f7f7f6;
  --stride-color-accent-slate-100: #eeeeed;
  --stride-color-accent-slate-200: #e1e1e0;
  --stride-color-accent-slate-300: #d0d0cf;
  --stride-color-accent-slate-400: #b7b7b5;
  --stride-color-accent-slate-500: #9a9a98;
  --stride-color-accent-slate-600: #70706e;
  --stride-color-accent-slate-700: #575755;
  --stride-color-accent-slate-800: #3d3d3b;
  --stride-color-accent-slate-900: #2b2b29;
  --stride-color-accent-slate-950: #20201f;

  /* Color / accent-yellow */
  --stride-color-accent-yellow-50: #f9f7f1;
  --stride-color-accent-yellow-100: #f4efdd;
  --stride-color-accent-yellow-200: #ece3c0;
  --stride-color-accent-yellow-300: #e2d49a;
  --stride-color-accent-yellow-400: #d6c066;
  --stride-color-accent-yellow-500: #c2a73a;
  --stride-color-accent-yellow-600: #847127;
  --stride-color-accent-yellow-700: #695b23;
  --stride-color-accent-yellow-800: #54491f;
  --stride-color-accent-yellow-900: #41391b;
  --stride-color-accent-yellow-950: #322c15;

  /* Color / accent-pink */
  --stride-color-accent-pink-50: #fbf4f9;
  --stride-color-accent-pink-100: #f7e8f2;
  --stride-color-accent-pink-200: #f1d6e9;
  --stride-color-accent-pink-300: #eabbdc;
  --stride-color-accent-pink-400: #e299cc;
  --stride-color-accent-pink-500: #d274b6;
  --stride-color-accent-pink-600: #bd559e;
  --stride-color-accent-pink-700: #9d4181;
  --stride-color-accent-pink-800: #783a65;
  --stride-color-accent-pink-900: #5d304f;
  --stride-color-accent-pink-950: #45223a;

  /* Color / gray */
  --stride-color-gray-0: #ffffff;
  --stride-color-gray-25: #fcfcfb;
  --stride-color-gray-50: #f7f7f6;
  --stride-color-gray-100: #eeeeed;
  --stride-color-gray-200: #e1e1e0;
  --stride-color-gray-300: #d0d0cf;
  --stride-color-gray-400: #b7b7b5;
  --stride-color-gray-500: #9a9a98;
  --stride-color-gray-550: #858583;
  --stride-color-gray-600: #70706e;
  --stride-color-gray-700: #575755;
  --stride-color-gray-800: #3d3d3b;
  --stride-color-gray-900: #2b2b29;
  --stride-color-gray-950: #20201f;
  --stride-color-gray-1000: #171716;

  /* Spacing */
  --stride-spacing-spc-0_5x: 2px;
  --stride-spacing-spc-1x: 4px;
  --stride-spacing-spc-1_5x: 6px;
  --stride-spacing-spc-2x: 8px;
  --stride-spacing-spc-2_5x: 10px;
  --stride-spacing-spc-3x: 12px;
  --stride-spacing-spc-4x: 16px;
  --stride-spacing-spc-5x: 20px;
  --stride-spacing-spc-7x: 28px;
  --stride-spacing-spc-10x: 40px;

  /* Border Width */
  --stride-border-width-thic-1: 1px;
  --stride-border-width-thic-1_25: 1.25px;
  --stride-border-width-thic-1_5: 1.5px;

  /* Radius */
  --stride-radius-rad-1x: 4px;
  --stride-radius-rad-1_5x: 6px;
  --stride-radius-rad-2x: 8px;
  --stride-radius-rad-2_5x: 10px;
  --stride-radius-rad-3_5x: 14px;
  --stride-radius-rad-full: 999px;
}

/*
 * Calendar 2026 semantic tokens.
 * Source: Figma "Client Calendar for Coaches" → Semantic collection (Light / Dark).
 * Every value aliases a primitive via var(--stride-color-*); never a raw hex.
 *
 * Figma name deviations (leaf names normalized to match the other accent families):
 *   olive/ctn-olive-teritiary → --stride-ctn-olive-tertiary
 */

[data-stride-theme="light"] {
  /* bg / canvas */
  --stride-bg-canvas-primary: var(--stride-color-gray-0);
  --stride-bg-canvas-muted: var(--stride-color-gray-50);

  /* bg / surface */
  --stride-bg-surface-primary: var(--stride-color-gray-0);
  --stride-bg-surface-secondary: var(--stride-color-gray-100);
  --stride-bg-surface-highlight: var(--stride-color-transparent-warning-100);
  --stride-bg-surface-highlight-muted: var(--stride-color-warning-50);
  /* Always dark, in either app theme — for permanently-inverse surfaces
   * like the snackbar. Same value as the dark-mode block below. */
  --stride-bg-surface-inverse: var(--stride-color-gray-950);

  /* bg / neutral */
  --stride-bg-neutral-primary: var(--stride-color-transparent-gray-0);
  --stride-bg-neutral-hover: var(--stride-color-transparent-gray-100);
  --stride-bg-neutral-active: var(--stride-color-transparent-gray-50);
  --stride-bg-neutral-disabled: var(--stride-color-transparent-gray-50);
  --stride-bg-neutral-selected: var(--stride-color-transparent-gray-100);
  --stride-bg-transparent-zero: var(--stride-color-transparent-gray-0);

  /* bg / brand */
  --stride-bg-brand-primary: var(--stride-color-brand-blue-600);
  --stride-bg-brand-hover: var(--stride-color-brand-blue-700);
  --stride-bg-brand-active: var(--stride-color-brand-blue-500);
  --stride-bg-brand-disabled: var(--stride-color-brand-blue-400);
  --stride-bg-brand-surface: var(--stride-color-transparent-brand-blue-100);
  --stride-bg-brand-overlay: var(--stride-color-transparent-brand-blue-300);

  /* bg / danger */
  --stride-bg-danger-primary: var(--stride-color-danger-600);
  --stride-bg-danger-hover: var(--stride-color-danger-700);
  --stride-bg-danger-active: var(--stride-color-danger-500);
  --stride-bg-danger-disabled: var(--stride-color-danger-400);
  --stride-bg-danger-surface: var(--stride-color-danger-50);

  /* bg / success */
  --stride-bg-success-primary: var(--stride-color-success-600);
  --stride-bg-success-hover: var(--stride-color-success-700);
  --stride-bg-success-active: var(--stride-color-success-800);
  --stride-bg-success-surface: var(--stride-color-success-50);

  /* bg / warning */
  --stride-bg-warning-primary: var(--stride-color-warning-600);
  --stride-bg-warning-hover: var(--stride-color-warning-700);
  --stride-bg-warning-active: var(--stride-color-warning-800);

  /* bg / info */
  --stride-bg-info-primary: var(--stride-color-info-600);
  --stride-bg-info-hover: var(--stride-color-info-700);
  --stride-bg-info-active: var(--stride-color-info-800);

  /* bg / overlay */
  --stride-bg-overlay: var(--stride-color-transparent-gray-500);

  /* ctn */
  --stride-ctn-primary: var(--stride-color-transparent-gray-950);
  --stride-ctn-secondary: var(--stride-color-transparent-gray-800);
  --stride-ctn-tertiary: var(--stride-color-transparent-gray-600);
  --stride-ctn-muted: var(--stride-color-transparent-gray-500);
  --stride-ctn-placeholder: var(--stride-color-transparent-gray-500);
  --stride-ctn-disabled: var(--stride-color-transparent-gray-500);
  --stride-ctn-inversed: var(--stride-color-transparent-white-900);
  --stride-ctn-inversed-disabled: var(--stride-color-transparent-white-600);

  /* ctn / success */
  --stride-ctn-success-primary: var(--stride-color-success-600);
  --stride-ctn-success-secondary: var(--stride-color-success-500);

  /* ctn / danger */
  --stride-ctn-danger-primary: var(--stride-color-danger-600);
  --stride-ctn-danger-secondary: var(--stride-color-danger-500);

  /* ctn / warning */
  --stride-ctn-warning-primary: var(--stride-color-warning-800);
  --stride-ctn-warning-secondary: var(--stride-color-warning-700);

  /* ctn / info */
  --stride-ctn-info-primary: var(--stride-color-info-700);
  --stride-ctn-info-secondary: var(--stride-color-info-600);

  /* ctn / brand — Figma aliases the info ramp, which currently shares
   * brand-blue hexes. Keep the alias graph matching Figma. */
  --stride-ctn-brand-primary: var(--stride-color-info-700);
  --stride-ctn-brand-secondary: var(--stride-color-info-600);

  /* ctn / link */
  --stride-ctn-link-primary: var(--stride-color-brand-blue-700);
  --stride-ctn-link-hover: var(--stride-color-brand-blue-800);
  --stride-ctn-link-pressed: var(--stride-color-brand-blue-900);
  --stride-link-disabled: var(--stride-color-transparent-gray-500);

  /* bdr */
  --stride-bdr-divider: var(--stride-color-transparent-gray-200);
  --stride-bdr-light: var(--stride-color-transparent-gray-200);
  --stride-bdr-dark: var(--stride-color-transparent-gray-200);
  --stride-bdr-darker: var(--stride-color-transparent-gray-300);
  --stride-bdr-disabled: var(--stride-color-transparent-gray-200);
  --stride-bdr-focus: var(--stride-color-brand-blue-500);
  --stride-bdr-focus-ring: var(--stride-color-brand-blue-200);
  --stride-bdr-hover: var(--stride-color-transparent-gray-300);
  --stride-bdr-danger: var(--stride-color-danger-600);
  --stride-bdr-success: var(--stride-color-success-600);
  --stride-bdr-warning: var(--stride-color-warning-600);
  --stride-bdr-highlight: var(--stride-color-warning-200);
  --stride-bdr-info: var(--stride-color-info-600);
  --stride-bdr-brand: var(--stride-color-brand-blue-600);
  /* For tiny elements (buttons) on a permanently-inverse surface. Always
   * ~16% white, in either app theme — same value as the dark-mode block. */
  --stride-bdr-inversed: var(--stride-color-transparent-white-100);

  /* shadow — color only; composed drop shadows live in effects.css */
  --stride-shadow-color-sm: var(--stride-color-transparent-gray-50);
  --stride-shadow-color-md: var(--stride-color-transparent-gray-100);
  --stride-shadow-color-lg: var(--stride-color-transparent-gray-200);

  /* brick */
  --stride-bg-brick-primary: var(--stride-color-accent-brick-500);
  --stride-bg-brick-surface: var(--stride-color-accent-brick-100);
  --stride-bg-brick-surface-transparent: var(
    --stride-color-transparent-accent-brick-600
  );
  --stride-ctn-brick-primary: var(--stride-color-accent-brick-600);
  --stride-ctn-brick-secondary: var(--stride-color-accent-brick-500);
  --stride-ctn-brick-tertiary: var(--stride-color-accent-brick-400);
  --stride-bdr-brick-light: var(--stride-color-accent-brick-300);
  --stride-bdr-brick-dark: var(--stride-color-accent-brick-700);

  /* amber */
  --stride-bg-amber-primary: var(--stride-color-accent-amber-500);
  --stride-bg-amber-surface: var(--stride-color-accent-amber-100);
  --stride-bg-amber-surface-transparent: var(
    --stride-color-transparent-accent-amber-200
  );
  --stride-ctn-amber-primary: var(--stride-color-accent-amber-600);
  --stride-ctn-amber-secondary: var(--stride-color-accent-amber-500);
  --stride-ctn-amber-tertiary: var(--stride-color-accent-amber-400);
  --stride-bdr-amber-light: var(--stride-color-accent-amber-300);
  --stride-bdr-amber-dark: var(--stride-color-accent-amber-700);

  /* yellow */
  --stride-bg-yellow-primary: var(--stride-color-accent-yellow-500);
  --stride-bg-yellow-surface: var(--stride-color-accent-yellow-100);
  --stride-bg-yellow-surface-transparent: var(
    --stride-color-transparent-accent-yellow-500
  );
  --stride-ctn-yellow-primary: var(--stride-color-accent-yellow-600);
  --stride-ctn-yellow-secondary: var(--stride-color-accent-yellow-500);
  --stride-ctn-yellow-tertiary: var(--stride-color-accent-yellow-400);
  --stride-bdr-yellow-light: var(--stride-color-accent-yellow-300);
  --stride-bdr-yellow-dark: var(--stride-color-accent-yellow-700);

  /* pink */
  --stride-bg-pink-primary: var(--stride-color-accent-pink-500);
  --stride-bg-pink-surface: var(--stride-color-accent-pink-100);
  --stride-bg-pink-surface-transparent: var(
    --stride-color-transparent-accent-pink-200
  );
  --stride-ctn-pink-primary: var(--stride-color-accent-pink-600);
  --stride-ctn-pink-secondary: var(--stride-color-accent-pink-500);
  --stride-ctn-pink-tertiary: var(--stride-color-accent-pink-400);
  --stride-bdr-pink-light: var(--stride-color-accent-pink-300);
  --stride-bdr-pink-dark: var(--stride-color-accent-pink-700);

  /* purple */
  --stride-bg-purple-primary: var(--stride-color-accent-purple-500);
  --stride-bg-purple-surface: var(--stride-color-accent-purple-100);
  --stride-bg-purple-surface-transparent: var(
    --stride-color-transparent-accent-purple-200
  );
  --stride-ctn-purple-primary: var(--stride-color-accent-purple-600);
  --stride-ctn-purple-secondary: var(--stride-color-accent-purple-500);
  --stride-ctn-purple-tertiary: var(--stride-color-accent-purple-400);
  --stride-bdr-purple-light: var(--stride-color-accent-purple-300);
  --stride-bdr-purple-dark: var(--stride-color-accent-purple-700);

  /* olive */
  --stride-bg-olive-primary: var(--stride-color-accent-olive-500);
  --stride-bg-olive-surface: var(--stride-color-accent-olive-100);
  --stride-bg-olive-surface-transparent: var(
    --stride-color-transparent-accent-olive-200
  );
  --stride-ctn-olive-primary: var(--stride-color-accent-olive-600);
  --stride-ctn-olive-secondary: var(--stride-color-accent-olive-500);
  --stride-ctn-olive-tertiary: var(--stride-color-accent-olive-400);
  --stride-bdr-olive-light: var(--stride-color-accent-olive-300);
  --stride-bdr-olive-dark: var(--stride-color-accent-olive-700);

  /* cyan */
  --stride-bg-cyan-primary: var(--stride-color-accent-cyan-500);
  --stride-bg-cyan-surface: var(--stride-color-accent-cyan-100);
  --stride-bg-cyan-surface-transparent: var(
    --stride-color-transparent-accent-cyan-300
  );
  --stride-ctn-cyan-primary: var(--stride-color-accent-cyan-600);
  --stride-ctn-cyan-secondary: var(--stride-color-accent-cyan-500);
  --stride-ctn-cyan-tertiary: var(--stride-color-accent-cyan-400);
  --stride-bdr-cyan-light: var(--stride-color-accent-cyan-300);
  --stride-bdr-cyan-dark: var(--stride-color-accent-cyan-700);

  /* indigo */
  --stride-bg-indigo-primary: var(--stride-color-accent-indigo-500);
  --stride-bg-indigo-surface: var(--stride-color-accent-indigo-100);
  --stride-bg-indigo-surface-transparent: var(
    --stride-color-transparent-accent-indigo-300
  );
  --stride-ctn-indigo-primary: var(--stride-color-accent-indigo-600);
  --stride-ctn-indigo-secondary: var(--stride-color-accent-indigo-500);
  --stride-ctn-indigo-tertiary: var(--stride-color-accent-indigo-400);
  --stride-bdr-indigo-light: var(--stride-color-accent-indigo-300);
  --stride-bdr-indigo-dark: var(--stride-color-accent-indigo-700);

  /* slate */
  --stride-bg-slate-primary: var(--stride-color-accent-slate-500);
  --stride-bg-slate-surface: var(--stride-color-accent-slate-100);
  --stride-bg-slate-surface-transparent: var(
    --stride-color-transparent-accent-slate-200
  );
  --stride-ctn-slate-primary: var(--stride-color-accent-slate-600);
  --stride-ctn-slate-secondary: var(--stride-color-accent-slate-500);
  --stride-ctn-slate-tertiary: var(--stride-color-accent-slate-400);
  --stride-bdr-slate-light: var(--stride-color-accent-slate-300);
  --stride-bdr-slate-dark: var(--stride-color-accent-slate-700);
}

[data-stride-theme="dark"] {
  /* bg / canvas */
  --stride-bg-canvas-primary: var(--stride-color-gray-1000);
  --stride-bg-canvas-muted: var(--stride-color-gray-950);

  /* bg / surface */
  --stride-bg-surface-primary: var(--stride-color-gray-900);
  --stride-bg-surface-secondary: var(--stride-color-gray-950);
  --stride-bg-surface-highlight: var(--stride-color-transparent-warning-700);
  --stride-bg-surface-highlight-muted: var(
    --stride-color-transparent-warning-900
  );
  /* Always dark, in either app theme — for permanently-inverse surfaces
   * like the snackbar. Same value as the light-mode block above. */
  --stride-bg-surface-inverse: var(--stride-color-gray-950);

  /* bg / neutral */
  --stride-bg-neutral-primary: var(--stride-color-transparent-white-0);
  --stride-bg-neutral-hover: var(--stride-color-transparent-white-50);
  --stride-bg-neutral-active: var(--stride-color-transparent-white-25);
  --stride-bg-neutral-disabled: var(--stride-color-transparent-white-25);
  --stride-bg-neutral-selected: var(--stride-color-transparent-white-50);
  --stride-bg-transparent-zero: var(--stride-color-transparent-white-0);

  /* bg / brand */
  --stride-bg-brand-primary: var(--stride-color-brand-blue-600);
  --stride-bg-brand-hover: var(--stride-color-brand-blue-700);
  --stride-bg-brand-active: var(--stride-color-brand-blue-500);
  --stride-bg-brand-disabled: var(--stride-color-brand-blue-950);
  --stride-bg-brand-surface: var(--stride-color-transparent-brand-blue-100);
  --stride-bg-brand-overlay: var(--stride-color-transparent-brand-blue-300);

  /* bg / danger */
  --stride-bg-danger-primary: var(--stride-color-danger-500);
  --stride-bg-danger-hover: var(--stride-color-danger-600);
  --stride-bg-danger-active: var(--stride-color-danger-400);
  --stride-bg-danger-disabled: var(--stride-color-danger-900);
  --stride-bg-danger-surface: var(--stride-color-transparent-danger-900);

  /* bg / success */
  --stride-bg-success-primary: var(--stride-color-success-500);
  --stride-bg-success-hover: var(--stride-color-success-400);
  --stride-bg-success-active: var(--stride-color-success-600);
  --stride-bg-success-surface: var(--stride-color-transparent-success-900);

  /* bg / warning */
  --stride-bg-warning-primary: var(--stride-color-warning-500);
  --stride-bg-warning-hover: var(--stride-color-warning-400);
  --stride-bg-warning-active: var(--stride-color-warning-600);

  /* bg / info */
  --stride-bg-info-primary: var(--stride-color-info-500);
  --stride-bg-info-hover: var(--stride-color-info-400);
  --stride-bg-info-active: var(--stride-color-info-600);

  /* bg / overlay */
  --stride-bg-overlay: var(--stride-color-transparent-gray-500);

  /* ctn */
  --stride-ctn-primary: var(--stride-color-transparent-white-800);
  --stride-ctn-secondary: var(--stride-color-transparent-white-600);
  --stride-ctn-tertiary: var(--stride-color-transparent-white-400);
  --stride-ctn-muted: var(--stride-color-transparent-white-300);
  --stride-ctn-placeholder: var(--stride-color-transparent-white-300);
  --stride-ctn-disabled: var(--stride-color-transparent-white-200);
  --stride-ctn-inversed: var(--stride-color-transparent-white-900);
  --stride-ctn-inversed-disabled: var(--stride-color-transparent-white-300);

  /* ctn / success */
  --stride-ctn-success-primary: var(--stride-color-success-300);
  --stride-ctn-success-secondary: var(--stride-color-success-300);

  /* ctn / danger */
  --stride-ctn-danger-primary: var(--stride-color-danger-300);
  --stride-ctn-danger-secondary: var(--stride-color-danger-300);

  /* ctn / warning */
  --stride-ctn-warning-primary: var(--stride-color-warning-200);
  --stride-ctn-warning-secondary: var(--stride-color-warning-300);

  /* ctn / info */
  --stride-ctn-info-primary: var(--stride-color-info-200);
  --stride-ctn-info-secondary: var(--stride-color-info-300);

  /* ctn / brand — Figma aliases the info ramp, which currently shares
   * brand-blue hexes. Keep the alias graph matching Figma. */
  --stride-ctn-brand-primary: var(--stride-color-info-200);
  --stride-ctn-brand-secondary: var(--stride-color-info-300);

  /* ctn / link */
  --stride-ctn-link-primary: var(--stride-color-brand-blue-400);
  --stride-ctn-link-hover: var(--stride-color-brand-blue-300);
  --stride-ctn-link-pressed: var(--stride-color-brand-blue-500);
  --stride-link-disabled: var(--stride-color-transparent-white-500);

  /* bdr */
  --stride-bdr-divider: var(--stride-color-transparent-white-50);
  --stride-bdr-light: var(--stride-color-transparent-white-25);
  --stride-bdr-dark: var(--stride-color-transparent-white-50);
  --stride-bdr-darker: var(--stride-color-transparent-white-100);
  --stride-bdr-disabled: var(--stride-color-transparent-white-50);
  --stride-bdr-focus: var(--stride-color-brand-blue-600);
  --stride-bdr-focus-ring: var(--stride-color-brand-blue-400);
  --stride-bdr-hover: var(--stride-color-transparent-white-100);
  --stride-bdr-danger: var(--stride-color-danger-400);
  --stride-bdr-success: var(--stride-color-success-400);
  --stride-bdr-warning: var(--stride-color-warning-400);
  --stride-bdr-highlight: var(--stride-color-transparent-warning-500);
  --stride-bdr-info: var(--stride-color-info-400);
  --stride-bdr-brand: var(--stride-color-brand-blue-400);
  /* For tiny elements (buttons) on a permanently-inverse surface. Always
   * ~16% white, in either app theme — same value as the light-mode block. */
  --stride-bdr-inversed: var(--stride-color-transparent-white-100);

  /* shadow — color only; composed drop shadows live in effects.css */
  --stride-shadow-color-sm: var(--stride-color-transparent-gray-0);
  --stride-shadow-color-md: var(--stride-color-transparent-gray-950);
  --stride-shadow-color-lg: var(--stride-color-transparent-gray-950);

  /* brick */
  --stride-bg-brick-primary: var(--stride-color-accent-brick-600);
  --stride-bg-brick-surface: var(--stride-color-accent-brick-950);
  --stride-bg-brick-surface-transparent: var(
    --stride-color-transparent-accent-brick-700
  );
  --stride-ctn-brick-primary: var(--stride-color-accent-brick-500);
  --stride-ctn-brick-secondary: var(--stride-color-accent-brick-600);
  --stride-ctn-brick-tertiary: var(--stride-color-accent-brick-700);
  --stride-bdr-brick-light: var(--stride-color-accent-brick-800);
  --stride-bdr-brick-dark: var(--stride-color-accent-brick-500);

  /* amber */
  --stride-bg-amber-primary: var(--stride-color-accent-amber-600);
  --stride-bg-amber-surface: var(--stride-color-accent-amber-950);
  --stride-bg-amber-surface-transparent: var(
    --stride-color-transparent-accent-amber-900
  );
  --stride-ctn-amber-primary: var(--stride-color-accent-amber-500);
  --stride-ctn-amber-secondary: var(--stride-color-accent-amber-600);
  --stride-ctn-amber-tertiary: var(--stride-color-accent-amber-700);
  --stride-bdr-amber-light: var(--stride-color-accent-amber-800);
  --stride-bdr-amber-dark: var(--stride-color-accent-amber-500);

  /* yellow */
  --stride-bg-yellow-primary: var(--stride-color-accent-yellow-600);
  --stride-bg-yellow-surface: var(--stride-color-accent-yellow-950);
  --stride-bg-yellow-surface-transparent: var(
    --stride-color-transparent-accent-yellow-900
  );
  --stride-ctn-yellow-primary: var(--stride-color-accent-yellow-500);
  --stride-ctn-yellow-secondary: var(--stride-color-accent-yellow-600);
  --stride-ctn-yellow-tertiary: var(--stride-color-accent-yellow-700);
  --stride-bdr-yellow-light: var(--stride-color-accent-yellow-800);
  --stride-bdr-yellow-dark: var(--stride-color-accent-yellow-500);

  /* pink */
  --stride-bg-pink-primary: var(--stride-color-accent-pink-600);
  --stride-bg-pink-surface: var(--stride-color-accent-pink-950);
  --stride-bg-pink-surface-transparent: var(
    --stride-color-transparent-accent-pink-700
  );
  --stride-ctn-pink-primary: var(--stride-color-accent-pink-500);
  --stride-ctn-pink-secondary: var(--stride-color-accent-pink-600);
  --stride-ctn-pink-tertiary: var(--stride-color-accent-pink-700);
  --stride-bdr-pink-light: var(--stride-color-accent-pink-800);
  --stride-bdr-pink-dark: var(--stride-color-accent-pink-500);

  /* purple */
  --stride-bg-purple-primary: var(--stride-color-accent-purple-600);
  --stride-bg-purple-surface: var(--stride-color-accent-purple-950);
  --stride-bg-purple-surface-transparent: var(
    --stride-color-transparent-accent-purple-700
  );
  --stride-ctn-purple-primary: var(--stride-color-accent-purple-500);
  --stride-ctn-purple-secondary: var(--stride-color-accent-purple-600);
  --stride-ctn-purple-tertiary: var(--stride-color-accent-purple-700);
  --stride-bdr-purple-light: var(--stride-color-accent-purple-800);
  --stride-bdr-purple-dark: var(--stride-color-accent-purple-500);

  /* olive */
  --stride-bg-olive-primary: var(--stride-color-accent-olive-600);
  --stride-bg-olive-surface: var(--stride-color-accent-olive-950);
  --stride-bg-olive-surface-transparent: var(
    --stride-color-transparent-accent-olive-900
  );
  --stride-ctn-olive-primary: var(--stride-color-accent-olive-500);
  --stride-ctn-olive-secondary: var(--stride-color-accent-olive-600);
  --stride-ctn-olive-tertiary: var(--stride-color-accent-olive-700);
  --stride-bdr-olive-light: var(--stride-color-accent-olive-800);
  --stride-bdr-olive-dark: var(--stride-color-accent-olive-500);

  /* cyan */
  --stride-bg-cyan-primary: var(--stride-color-accent-cyan-600);
  --stride-bg-cyan-surface: var(--stride-color-accent-cyan-950);
  --stride-bg-cyan-surface-transparent: var(
    --stride-color-transparent-accent-cyan-900
  );
  --stride-ctn-cyan-primary: var(--stride-color-accent-cyan-500);
  --stride-ctn-cyan-secondary: var(--stride-color-accent-cyan-600);
  --stride-ctn-cyan-tertiary: var(--stride-color-accent-cyan-700);
  --stride-bdr-cyan-light: var(--stride-color-accent-cyan-800);
  --stride-bdr-cyan-dark: var(--stride-color-accent-cyan-500);

  /* indigo */
  --stride-bg-indigo-primary: var(--stride-color-accent-indigo-600);
  --stride-bg-indigo-surface: var(--stride-color-accent-indigo-950);
  --stride-bg-indigo-surface-transparent: var(
    --stride-color-transparent-accent-indigo-700
  );
  --stride-ctn-indigo-primary: var(--stride-color-accent-indigo-500);
  --stride-ctn-indigo-secondary: var(--stride-color-accent-indigo-600);
  --stride-ctn-indigo-tertiary: var(--stride-color-accent-indigo-700);
  --stride-bdr-indigo-light: var(--stride-color-accent-indigo-800);
  --stride-bdr-indigo-dark: var(--stride-color-accent-indigo-500);

  /* slate */
  --stride-bg-slate-primary: var(--stride-color-accent-slate-600);
  --stride-bg-slate-surface: var(--stride-color-accent-slate-950);
  --stride-bg-slate-surface-transparent: var(
    --stride-color-transparent-accent-slate-100
  );
  --stride-ctn-slate-primary: var(--stride-color-accent-slate-500);
  --stride-ctn-slate-secondary: var(--stride-color-accent-slate-600);
  --stride-ctn-slate-tertiary: var(--stride-color-accent-slate-700);
  --stride-bdr-slate-light: var(--stride-color-accent-slate-800);
  --stride-bdr-slate-dark: var(--stride-color-accent-slate-500);
}

/*
 * Calendar 2026 typography tokens and text styles.
 * Source: Figma "Client Calendar for Coaches" local text styles (Inter Variable).
 * Font family maps to Inter (loaded app-wide via rsms.me/inter).
 * Text style classes are scoped under [data-stride-theme] so they cannot leak.
 */

[data-stride-theme] {
  --stride-font-family: Inter, sans-serif;
  --stride-font-size-12: 12px;
  --stride-font-size-13: 13px;
  --stride-font-size-14: 14px;
  --stride-font-size-18: 18px;
  --stride-font-size-24: 24px;
  --stride-font-weight-regular: 400;
  --stride-font-weight-medium: 500;
  --stride-font-weight-semibold: 600;
  --stride-font-weight-bold: 700;
  --stride-font-line-height-paragraph-xs: 16.8px;
  --stride-font-line-height-paragraph-sm: 18.98px;
  --stride-font-line-height-paragraph-md: 20.44px;
  /* DESCENDER-SAFE LINE HEIGHTS for the label sizes.
   *
   * Every `.stride-text-label-*` class below sets `line-height` equal to its
   * `font-size` — line-height 1.0, as the Figma text styles state it. Inter's
   * own ascent + descent is ~1.21em, so a 1.0 line box is SHORTER than the
   * glyphs it holds: the half-leading goes negative and the ink overhangs the
   * content box top and bottom by ~0.1em each. Wherever such a line sits in a
   * box with `overflow: hidden`, the browser clips that overhang and a
   * descender is cut off — "40 kg" loses the tail of the g.
   *
   * These are the same sizes rounded up past 1.21em, for the places that clip.
   * They are NOT applied to the text classes themselves: doing that would
   * re-flow every label in the system (buttons, menu rows, the tray header) to
   * fix a handful of boxes that clip, and the label classes are used far more
   * often for single centred lines that never could. A rule that opts in says
   * where the overflow actually is. */
  --stride-font-line-height-label-sm: 15px;
  --stride-font-line-height-label-md: 16px;
  --stride-font-line-height-label-lg: 17px;
}

[data-stride-theme] .stride-text-label-sm-regular,
[data-stride-theme] .stride-text-label-sm-medium,
[data-stride-theme] .stride-text-label-sm-semibold,
[data-stride-theme] .stride-text-label-sm-bold,
[data-stride-theme] .stride-text-label-md-regular,
[data-stride-theme] .stride-text-label-md-medium,
[data-stride-theme] .stride-text-label-md-semibold,
[data-stride-theme] .stride-text-label-md-bold,
[data-stride-theme] .stride-text-label-lg-regular,
[data-stride-theme] .stride-text-label-lg-medium,
[data-stride-theme] .stride-text-label-lg-semibold,
[data-stride-theme] .stride-text-label-lg-bold,
[data-stride-theme] .stride-text-title-sm-regular,
[data-stride-theme] .stride-text-title-sm-medium,
[data-stride-theme] .stride-text-title-sm-semibold,
[data-stride-theme] .stride-text-title-sm-bold,
[data-stride-theme] .stride-text-title-md-regular,
[data-stride-theme] .stride-text-title-md-medium,
[data-stride-theme] .stride-text-title-md-semibold,
[data-stride-theme] .stride-text-title-md-bold,
[data-stride-theme] .stride-text-title-lg-regular,
[data-stride-theme] .stride-text-title-lg-medium,
[data-stride-theme] .stride-text-title-lg-semibold,
[data-stride-theme] .stride-text-title-lg-bold,
[data-stride-theme] .stride-text-paragraph-xs-regular,
[data-stride-theme] .stride-text-paragraph-sm-regular,
[data-stride-theme] .stride-text-paragraph-sm-medium,
[data-stride-theme] .stride-text-paragraph-sm-semibold,
[data-stride-theme] .stride-text-paragraph-sm-bold,
[data-stride-theme] .stride-text-paragraph-md-regular,
[data-stride-theme] .stride-text-paragraph-md-medium,
[data-stride-theme] .stride-text-paragraph-md-semibold,
[data-stride-theme] .stride-text-paragraph-md-bold,
[data-stride-theme] .stride-text-button-regular,
[data-stride-theme] .stride-text-button-medium,
[data-stride-theme] .stride-text-button-semibold,
[data-stride-theme] .stride-text-button-bold {
  font-family: var(--stride-font-family);
  letter-spacing: 0;
  margin: 0;
}

[data-stride-theme] .stride-text-label-sm-regular {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-12);
}

[data-stride-theme] .stride-text-label-sm-medium {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-12);
}

[data-stride-theme] .stride-text-label-sm-semibold {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-12);
}

[data-stride-theme] .stride-text-label-sm-bold {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-12);
}

[data-stride-theme] .stride-text-label-md-regular {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-label-md-medium {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-label-md-semibold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-label-md-bold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-label-lg-regular {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-label-lg-medium {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-label-lg-semibold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-label-lg-bold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-sm-regular {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-sm-medium {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-sm-semibold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-sm-bold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-14);
}

[data-stride-theme] .stride-text-title-md-regular {
  font-size: var(--stride-font-size-18);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-text-title-md-medium {
  font-size: var(--stride-font-size-18);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-text-title-md-semibold {
  font-size: var(--stride-font-size-18);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-text-title-md-bold {
  font-size: var(--stride-font-size-18);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-text-title-lg-regular {
  font-size: var(--stride-font-size-24);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-24);
}

[data-stride-theme] .stride-text-title-lg-medium {
  font-size: var(--stride-font-size-24);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-24);
}

[data-stride-theme] .stride-text-title-lg-semibold {
  font-size: var(--stride-font-size-24);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-24);
}

[data-stride-theme] .stride-text-title-lg-bold {
  font-size: var(--stride-font-size-24);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-24);
}

[data-stride-theme] .stride-text-paragraph-xs-regular {
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-line-height-paragraph-xs);
}

[data-stride-theme] .stride-text-paragraph-sm-regular {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-line-height-paragraph-sm);
}

[data-stride-theme] .stride-text-paragraph-sm-medium {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-line-height-paragraph-sm);
}

[data-stride-theme] .stride-text-paragraph-sm-semibold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-line-height-paragraph-sm);
}

[data-stride-theme] .stride-text-paragraph-sm-bold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-line-height-paragraph-sm);
}

[data-stride-theme] .stride-text-paragraph-md-regular {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-line-height-paragraph-md);
}

[data-stride-theme] .stride-text-paragraph-md-medium {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-line-height-paragraph-md);
}

[data-stride-theme] .stride-text-paragraph-md-semibold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-line-height-paragraph-md);
}

[data-stride-theme] .stride-text-paragraph-md-bold {
  font-size: var(--stride-font-size-14);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-line-height-paragraph-md);
}

[data-stride-theme] .stride-text-button-regular {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-regular);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-button-medium {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-medium);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-button-semibold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-semibold);
  line-height: var(--stride-font-size-13);
}

[data-stride-theme] .stride-text-button-bold {
  font-size: var(--stride-font-size-13);
  font-weight: var(--stride-font-weight-bold);
  line-height: var(--stride-font-size-13);
}

/*
 * TKC Stride effect styles.
 * Source: Figma "TKC Calendar 2026" → Shadow/sm, Shadow/md, Shadow/lg,
 * Shadow/focus. Shadow/sm, Shadow/md, and Shadow/lg alias Semantic
 * --stride-shadow-color-*. Shadow/focus aliases Semantic
 * --stride-bdr-focus-ring so Light/Dark track.
 */

[data-stride-theme] {
  --stride-shadow-sm: 0 0.5px 1.5px 0 var(--stride-shadow-color-sm);
  --stride-shadow-md:
    0 8px 18px 0 var(--stride-shadow-color-lg),
    0 1px 4px -1px var(--stride-shadow-color-sm);
  --stride-shadow-lg: 0 8px 28px 0 var(--stride-shadow-color-lg);
  --stride-shadow-focus: 0 0 0 2px var(--stride-bdr-focus-ring);
}

[data-stride-theme] .stride-shadow-sm {
  box-shadow: var(--stride-shadow-sm);
}

[data-stride-theme] .stride-shadow-md {
  box-shadow: var(--stride-shadow-md);
}

[data-stride-theme] .stride-shadow-lg {
  box-shadow: var(--stride-shadow-lg);
}

[data-stride-theme] .stride-shadow-focus {
  box-shadow: var(--stride-shadow-focus);
}

/*
 * Stride Avatar placeholder.
 * Source: Figma "TKC Calendar 2026" node 1737:73.
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: clip;
  box-sizing: border-box;
  padding: var(--stride-spacing-spc-0_5x);
  border-radius: var(--stride-radius-rad-full);
  background: var(--stride-bg-surface-secondary);
  color: var(--stride-ctn-tertiary);
  text-align: center;
}

[data-stride-theme] .stride-avatar-placeholder--large {
  width: 32px;
  height: 32px;
  font-family: var(--stride-font-family);
  font-size: 15px;
  font-weight: var(--stride-font-weight-semibold);
  line-height: 15px;
  letter-spacing: 0;
}

[data-stride-theme] .stride-avatar-placeholder--small {
  width: 24px;
  height: 24px;
}

/* Used for the small profile photo inside the thread entry point pills
 * (Figma "Profile image", 20px). No 10px font-size token exists yet, so the
 * initials size is set directly on this one-off label class instead of a
 * shared text utility. */
[data-stride-theme] .stride-avatar-placeholder--extra-small {
  width: 20px;
  height: 20px;
}

[data-stride-theme] .stride-avatar-placeholder-initials--extra-small {
  font-family: var(--stride-font-family);
  font-size: 10px;
  font-weight: var(--stride-font-weight-semibold);
  line-height: 10px;
  letter-spacing: 0;
}

[data-stride-theme] .stride-avatar-placeholder span {
  width: 100%;
}

/*
 * Stride Button.
 * Source: Figma "TKC Calendar 2026" node 1722:103815.
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-button,
[data-stride-theme] .stride-button * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma labeled buttons: min width 60px. Icon-only is square and overrides. */
  min-width: 60px;
  height: 36px;
  margin: 0;
  padding: 0 var(--stride-spacing-spc-4x);
  overflow: clip;
  border: var(--stride-border-width-thic-1) solid var(--stride-bdr-darker);
  border-radius: var(--stride-radius-rad-2x);
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: var(--stride-shadow-sm);
}

[data-stride-theme] .stride-button:focus {
  outline: none;
}

[data-stride-theme] .stride-button:focus-visible {
  box-shadow: var(--stride-shadow-focus);
}

[data-stride-theme] .stride-button:disabled {
  cursor: not-allowed;
}

[data-stride-theme] .stride-button[data-loading="true"] {
  cursor: default;
  pointer-events: none;
}

[data-stride-theme] .stride-button--small {
  height: 28px;
  padding: 0 var(--stride-spacing-spc-3x);
  border-radius: var(--stride-radius-rad-1_5x);
}

[data-stride-theme] .stride-button--default.stride-button--has-leading {
  padding-left: var(--stride-spacing-spc-3x);
}

[data-stride-theme] .stride-button--default.stride-button--has-trailing {
  padding-right: var(--stride-spacing-spc-3x);
}

[data-stride-theme]
  .stride-button--small.stride-button--has-leading:not(
    .stride-button--has-trailing
  ) {
  padding-left: var(--stride-spacing-spc-2x);
  padding-right: var(--stride-spacing-spc-2_5x);
}

[data-stride-theme]
  .stride-button--small.stride-button--has-trailing:not(
    .stride-button--has-leading
  ) {
  padding-left: var(--stride-spacing-spc-2_5x);
  padding-right: var(--stride-spacing-spc-2x);
}

[data-stride-theme]
  .stride-button--small.stride-button--has-leading.stride-button--has-trailing {
  padding-left: var(--stride-spacing-spc-2x);
  padding-right: var(--stride-spacing-spc-2x);
}

[data-stride-theme] .stride-button--icon-only {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

[data-stride-theme] .stride-button--icon-only.stride-button--small {
  width: 28px;
  min-width: 28px;
}

[data-stride-theme] .stride-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--stride-spacing-spc-1x);
  min-width: 0;
}

[data-stride-theme] .stride-button[data-loading="true"] .stride-button-content {
  visibility: hidden;
}

[data-stride-theme] .stride-button-label {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

[data-stride-theme] .stride-button-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--stride-spacing-spc-4x);
  height: var(--stride-spacing-spc-4x);
}

[data-stride-theme] .stride-button--small .stride-button-icon {
  width: var(--stride-font-size-14);
  height: var(--stride-font-size-14);
}

[data-stride-theme]
  .stride-button--icon-only.stride-button--default
  .stride-button-icon {
  width: var(--stride-font-size-18);
  height: var(--stride-font-size-18);
}

[data-stride-theme] .stride-button-icon svg,
[data-stride-theme] .stride-button-spinner svg {
  display: block;
  width: 100%;
  height: 100%;
}

[data-stride-theme] .stride-button-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--stride-font-size-18);
  height: var(--stride-font-size-18);
  transform: translate(-50%, -50%);
  animation: stride-button-spin 0.8s linear infinite;
}

[data-stride-theme] .stride-button--small .stride-button-spinner {
  width: var(--stride-spacing-spc-4x);
  height: var(--stride-spacing-spc-4x);
}

[data-stride-theme] .stride-button-spinner--static {
  animation: none;
}

@keyframes stride-button-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

[data-stride-theme] .stride-button--primary {
  background: var(--stride-bg-brand-primary);
  color: var(--stride-ctn-inversed);
}

[data-stride-theme]
  .stride-button--primary:hover:not(:disabled):not([data-loading="true"]),
[data-stride-theme]
  .stride-button--primary:focus-visible:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-brand-hover);
}

/* A BUTTON THAT HAS OPENED SOMETHING STAYS VISUALLY ACTIVE.
 *
 * Two hooks, and the split between them matters:
 *
 *   aria-expanded="true"  — disclosure (menu, flyout, picker). Free, because a
 *     trigger that opens a menu ALREADY has to carry it for assistive tech,
 *     and a button that opens nothing never sets it.
 *
 *   data-selected="true"  — set by StrideButton's `selected` prop. NOT keyed on
 *     `aria-pressed`, which was the first attempt: plenty of buttons are
 *     legitimately pressed-state toggles without wanting a persistent fill.
 *     `workout_card`'s select checkbox and `week_options_rail`'s select-week
 *     toggle are both ghost + aria-pressed, and hooking ARIA repainted every
 *     selected workout card. Opt-in keeps the fill where it was designed —
 *     e.g. the tray header's five buttons, which share ONE side pane and so
 *     cannot use aria-expanded.
 *
 * Secondary and Ghost have a Figma Selected state: --stride-bg-neutral-selected,
 * held after pointer, tap, or keyboard focus leave, while the related UI is
 * open. That is distinct from `:active` (--stride-bg-neutral-active).
 * Primary and Danger have no Selected variant yet, so they still reuse their
 * own `:active` fill for `aria-expanded`.
 *
 * Divyam, 2026-09-16: "Whenever clicking an icon or button reveals additional
 * options, the button should remain in its active state until those options are
 * closed." */
[data-stride-theme]
  .stride-button--primary:active:not(:disabled):not([data-loading="true"]),
[data-stride-theme]
  .stride-button--primary[aria-expanded="true"]:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-brand-active);
}

[data-stride-theme] .stride-button--primary:disabled,
[data-stride-theme] .stride-button--primary[data-loading="true"] {
  background: var(--stride-bg-brand-disabled);
  border-color: var(--stride-bdr-disabled);
  color: var(--stride-ctn-inversed-disabled);
}

[data-stride-theme] .stride-button--secondary {
  background: var(--stride-bg-neutral-primary);
  color: var(--stride-ctn-secondary);
}

[data-stride-theme]
  .stride-button--secondary:hover:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-neutral-hover);
}

[data-stride-theme]
  .stride-button--secondary[aria-expanded="true"]:not(:disabled):not(
    [data-loading="true"]
  ),
[data-stride-theme]
  .stride-button--secondary[data-selected="true"]:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-neutral-selected);
}

[data-stride-theme]
  .stride-button--secondary:active:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-neutral-active);
}

[data-stride-theme] .stride-button--secondary:disabled {
  background: var(--stride-bg-neutral-disabled);
  border-color: var(--stride-bdr-disabled);
  color: var(--stride-ctn-disabled);
}

[data-stride-theme] .stride-button--secondary[data-loading="true"] {
  background: var(--stride-bg-neutral-primary);
  border-color: var(--stride-bdr-disabled);
}

[data-stride-theme] .stride-button--ghost {
  background: var(--stride-bg-neutral-primary);
  border-color: transparent;
  box-shadow: none;
  color: var(--stride-ctn-secondary);
}

[data-stride-theme]
  .stride-button--ghost:hover:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-neutral-hover);
}

[data-stride-theme]
  .stride-button--ghost[aria-expanded="true"]:not(:disabled):not(
    [data-loading="true"]
  ),
[data-stride-theme]
  .stride-button--ghost[data-selected="true"]:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-neutral-selected);
}

[data-stride-theme]
  .stride-button--ghost:active:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-neutral-active);
}

[data-stride-theme] .stride-button--ghost:focus-visible {
  box-shadow: var(--stride-shadow-focus);
}

[data-stride-theme] .stride-button--ghost:disabled {
  color: var(--stride-ctn-disabled);
}

[data-stride-theme] .stride-button--danger {
  background: var(--stride-bg-danger-primary);
  color: var(--stride-ctn-inversed);
}

[data-stride-theme]
  .stride-button--danger:hover:not(:disabled):not([data-loading="true"]) {
  background: var(--stride-bg-danger-hover);
}

[data-stride-theme]
  .stride-button--danger:active:not(:disabled):not([data-loading="true"]),
[data-stride-theme]
  .stride-button--danger[aria-expanded="true"]:not(:disabled):not(
    [data-loading="true"]
  ) {
  background: var(--stride-bg-danger-active);
}

[data-stride-theme] .stride-button--danger:disabled,
[data-stride-theme] .stride-button--danger[data-loading="true"] {
  background: var(--stride-bg-danger-disabled);
  border-color: var(--stride-bdr-disabled);
  color: var(--stride-ctn-inversed-disabled);
}



/*
 * Stride Medal.
 * Pending design review — no Figma frame yet; drawn from the dashboard's
 * design canvas ("Highlights").
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-medal {
  display: block;
  flex: none;
}

[data-stride-theme] .stride-medal-ribbon {
  fill: var(--stride-bg-brand-surface);
}

[data-stride-theme] .stride-medal-disc {
  fill: var(--stride-bg-brand-primary);
}

/* A fine inner rim, the disc's own colour lightened by white. */
[data-stride-theme] .stride-medal-rim {
  fill: none;
  stroke: var(--stride-ctn-inversed);
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}

[data-stride-theme] .stride-medal-figure {
  fill: var(--stride-ctn-inversed);
  font-family: var(--stride-font-family);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* StrideGreetingCard. Pending design review: no Figma frame yet. Each
   template's colours hold white text at 4.5:1 or more (blue 700 5.4, yellow
   600 4.8, amber 700 5.4 to brick 700 6.8, olive 700 6.0). */

[data-stride-theme] .stride-greeting-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(340px, 100%);
  /* At least 4:5; taller when a long note needs it (nothing here clips,
     which would hold it at 4:5 and cut the note off). */
  aspect-ratio: 4 / 5;
  padding: 24px;
  border-radius: 24px;
  color: var(--stride-color-transparent-white-1000);
  /* Its own: it's drawn on V1's pages too, whose font isn't Stride's. */
  font-family: var(--stride-font-family);
  text-align: left;
  box-shadow: var(--stride-shadow-lg);
}

[data-stride-theme] .stride-greeting-card--confetti {
  background: linear-gradient(
    165deg,
    var(--stride-color-brand-blue-700),
    var(--stride-color-brand-blue-800)
  );
}

[data-stride-theme] .stride-greeting-card--trophy {
  background: linear-gradient(
    165deg,
    var(--stride-color-accent-yellow-600),
    var(--stride-color-accent-yellow-800)
  );
}

[data-stride-theme] .stride-greeting-card--on_fire {
  background: linear-gradient(
    165deg,
    var(--stride-color-accent-amber-700),
    var(--stride-color-accent-brick-700)
  );
}

[data-stride-theme] .stride-greeting-card--medal {
  background: linear-gradient(
    165deg,
    var(--stride-color-accent-olive-700),
    var(--stride-color-accent-olive-800)
  );
}

/* The picture: the top of the card, behind nothing. */
[data-stride-theme] .stride-greeting-card-motif {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

[data-stride-theme] .stride-greeting-card-glyph {
  width: 96px;
  height: 96px;
}

[data-stride-theme] .stride-greeting-card--trophy .stride-greeting-card-glyph {
  color: var(--stride-color-accent-yellow-300);
}

[data-stride-theme] .stride-greeting-card--on_fire .stride-greeting-card-glyph {
  color: var(--stride-color-accent-amber-300);
}

[data-stride-theme] .stride-greeting-card-medal .stride-medal {
  width: 96px;
  height: 114px;
}

/* Gold on the green card, not the timeline's brand blue. */
[data-stride-theme] .stride-greeting-card-medal .stride-medal-ribbon {
  fill: var(--stride-color-accent-brick-600);
}

[data-stride-theme] .stride-greeting-card-medal .stride-medal-disc {
  fill: var(--stride-color-accent-yellow-400);
}

[data-stride-theme] .stride-greeting-card-medal .stride-medal-rim {
  stroke: var(--stride-color-accent-yellow-700);
}

[data-stride-theme] .stride-greeting-card-medal .stride-medal-figure {
  fill: var(--stride-color-accent-yellow-800);
}

/* Confetti: pieces over the top of the card, as `CONFETTI` places them. */
[data-stride-theme] .stride-greeting-card-confetti {
  position: absolute;
  inset: -24px -24px 0;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

[data-stride-theme] .stride-greeting-card-confetti-piece {
  position: absolute;
  display: block;
}

[data-stride-theme] .stride-greeting-card-confetti-piece--a {
  width: 12px;
  height: 5px;
  border-radius: 1px;
  background: var(--stride-color-accent-yellow-300);
}

[data-stride-theme] .stride-greeting-card-confetti-piece--b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stride-color-accent-brick-300);
}

[data-stride-theme] .stride-greeting-card-confetti-piece--c {
  width: 6px;
  height: 12px;
  border-radius: 1px;
  background: var(--stride-color-accent-olive-300);
}

[data-stride-theme] .stride-greeting-card-confetti-piece--d {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--stride-color-transparent-white-1000);
}

[data-stride-theme] .stride-greeting-card-confetti-piece--e {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stride-color-accent-amber-300);
}

[data-stride-theme] .stride-greeting-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

[data-stride-theme] .stride-greeting-card-overline {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--stride-color-transparent-white-100);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-stride-theme] .stride-greeting-card-figure {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 44px;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.02em;
}

[data-stride-theme] .stride-greeting-card-caption {
  font-size: 13px;
  line-height: 18px;
  opacity: 0.85;
}

[data-stride-theme] .stride-greeting-card-note {
  margin: 8px 0 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-line;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

[data-stride-theme] .stride-greeting-card-signature {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

[data-stride-theme] .stride-greeting-card-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* The initials, when there's no photo: the same on every card and in either
   theme (the placeholder's own surface follows the theme). */
[data-stride-theme] .stride-greeting-card-avatar.stride-avatar-placeholder {
  background: var(--stride-color-transparent-white-200);
  color: var(--stride-color-transparent-white-1000);
}

/* Compact: a chat message's card and the composer's picker. */
[data-stride-theme] .stride-greeting-card--compact {
  width: 160px;
  padding: 12px;
  border-radius: 14px;
  box-shadow: none;
}

[data-stride-theme] .stride-greeting-card--compact .stride-greeting-card-glyph {
  width: 44px;
  height: 44px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-medal
  .stride-medal {
  width: 44px;
  height: 52px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-confetti {
  inset: -12px -12px 0;
  transform: scale(0.6);
  transform-origin: top left;
  /* Edge to edge once scaled: the motif's width plus both paddings. */
  width: calc((100% + 24px) / 0.6);
}

[data-stride-theme] .stride-greeting-card--compact .stride-greeting-card-body {
  gap: 2px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-overline {
  padding: 2px 6px;
  font-size: 9px;
  line-height: 12px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-figure {
  font-size: 22px;
  line-height: 26px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-caption {
  font-size: 10px;
  line-height: 13px;
}

/* The back (StrideGreetingReveal, before it's opened): the picture alone,
   larger, the confetti over the whole card. */
[data-stride-theme] .stride-greeting-card--back .stride-greeting-card-glyph {
  width: 144px;
  height: 144px;
}

[data-stride-theme]
  .stride-greeting-card--back
  .stride-greeting-card-medal
  .stride-medal {
  width: 144px;
  height: 171px;
}

[data-stride-theme] .stride-greeting-card--back .stride-greeting-card-confetti {
  inset: -24px;
  border-radius: 24px;
}

/*
 * Stride chart palette.
 * Pending design review — no Figma frame defines chart colours yet.
 *
 * Series colours for charts and sparklines, in a fixed order: a chart
 * assigns series 1, 2, 3 (then 4, 5, 6, below) to its entities in order and
 * never cycles. Every slot but series 4–6 aliases an existing primitive;
 * those three are the only chart-only values. The semantic token layer
 * (which the un-flagged Gym View also reads) is untouched.
 *
 * Why not the accent order the PR chart uses (brick, amber, yellow)? It
 * fails a colour-vision check: brick/amber and amber/yellow sit too close
 * for protan and deutan readers. Blue, amber, purple passes every pair at
 * three series in both modes (worst pair ΔE 7.5, so line charts that use
 * all three must also label lines directly, not by colour alone).
 *
 * Every series, muted included, keeps 3:1 against the card surface it sits
 * on (bg-surface-primary), which in dark mode is lighter than the canvas.
 * That is why dark keeps brand-blue 600 and purple 500 rather than the
 * darker steps: those drop under 3:1 on the dark card.
 *
 * Series 4–6 are for a chart that draws more than three series (the
 * dashboard's chart builder: up to six exercises; Divyam, 2026-10-26). They
 * follow 1–3, which stay as they are, and come from the brick, cyan and
 * pink families, tweaked for charts: no existing step of those families
 * clears the checks next to blue, amber and purple. They are the only raw
 * values here, chart-only until design adds them to the Figma primitives.
 * Checked with the dataviz validator across ALL pairs (any two lines can
 * cross in one panel): light passes every gate (worst full-colour-vision
 * ΔE 17.1; colour-vision 7.5, the shipped blue/purple pair). Dark cannot:
 * its lightness band is too narrow for six (even with 1–3 free, the best
 * is ΔE ~11). The dark steps are the best found (ΔE 12.5, colour-vision
 * 6.8), so a chart using 4–6 names every line (StridePanelChart
 * `nameEveryLine`), never colour alone (Divyam, 2026-10-26).
 *
 * Muted is "Other" in a stacked bar, where it sits on series 3. Gray 550 was
 * a hair too close to purple there for readers with full colour vision
 * (ΔE 14.9, under the 15 floor), so it is one step further from the card
 * surface in each mode: gray 600 in light (ΔE 17.8), gray 400 in dark
 * (19.8). Both pass next to every series.
 *
 * Sequential 1–4 is an ordered scale (one hue, light to dark), for bands
 * of one measure, such as reps by % of max: low to high is light to dark on
 * a light card, and dark to light on a dark one, so the high end always
 * stands out most. Adjacent steps differ in lightness by 0.06 or more, and
 * the faintest step keeps 2:1 against the card.
 *
 * Bands shade a stretch of time behind a line (a training block), in the
 * colour the coach gave it: the six block colours, each the mid (500) step
 * of its hue. Charts draw them at STRIDE_CHART_BAND_OPACITY (14%), which
 * keeps every band at least ΔE 6.8 from the card in both modes. A tint
 * lowers a line's contrast (brand blue drops under 3:1 on any dark band), so
 * a chart with bands draws each line over a card-coloured casing, which is
 * what the line is then seen against.
 *
 * Scoped under [data-stride-theme].
 */

[data-stride-theme="light"] {
  --stride-chart-series-1: var(--stride-color-brand-blue-600);
  --stride-chart-series-2: var(--stride-color-accent-amber-500);
  --stride-chart-series-3: var(--stride-color-accent-purple-500);
  /* Chart-only tweaks of brick, cyan and pink (see above). */
  --stride-chart-series-4: #973023;
  --stride-chart-series-5: #008d88;
  --stride-chart-series-6: #a21f8f;
  --stride-chart-series-muted: var(--stride-color-gray-600);
  /* A series that is none of the ones compared (a client's own measure under
     their lifts): opaque ink, so dots and rings never darken the line. */
  --stride-chart-series-ink: var(--stride-color-gray-800);
  --stride-chart-sequential-1: var(--stride-color-brand-blue-400);
  --stride-chart-sequential-2: var(--stride-color-brand-blue-600);
  --stride-chart-sequential-3: var(--stride-color-brand-blue-800);
  --stride-chart-sequential-4: var(--stride-color-brand-blue-950);
  --stride-chart-grid: var(--stride-color-transparent-gray-100);
  --stride-chart-band-blue: var(--stride-color-brand-blue-500);
  --stride-chart-band-purple: var(--stride-color-accent-purple-500);
  --stride-chart-band-teal: var(--stride-color-accent-cyan-500);
  --stride-chart-band-orange: var(--stride-color-accent-amber-500);
  --stride-chart-band-red: var(--stride-color-accent-brick-500);
  --stride-chart-band-green: var(--stride-color-accent-olive-500);
}

[data-stride-theme="dark"] {
  --stride-chart-series-1: var(--stride-color-brand-blue-600);
  --stride-chart-series-2: var(--stride-color-accent-amber-600);
  --stride-chart-series-3: var(--stride-color-accent-purple-500);
  /* Chart-only tweaks of brick, cyan and pink (see above). */
  --stride-chart-series-4: #eb5970;
  --stride-chart-series-5: #35a69c;
  --stride-chart-series-6: #be4496;
  --stride-chart-series-muted: var(--stride-color-gray-400);
  --stride-chart-series-ink: var(--stride-color-gray-200);
  --stride-chart-sequential-1: var(--stride-color-brand-blue-700);
  --stride-chart-sequential-2: var(--stride-color-brand-blue-500);
  --stride-chart-sequential-3: var(--stride-color-brand-blue-400);
  --stride-chart-sequential-4: var(--stride-color-brand-blue-200);
  --stride-chart-grid: var(--stride-color-transparent-white-50);
  --stride-chart-band-blue: var(--stride-color-brand-blue-500);
  --stride-chart-band-purple: var(--stride-color-accent-purple-500);
  --stride-chart-band-teal: var(--stride-color-accent-cyan-500);
  --stride-chart-band-orange: var(--stride-color-accent-amber-500);
  --stride-chart-band-red: var(--stride-color-accent-brick-500);
  --stride-chart-band-green: var(--stride-color-accent-olive-500);
}

/*
 * Stride Modal.
 * Source: Figma "TKC Calendar 2026" node 2651:194554.
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-modal-root,
[data-stride-theme] .stride-modal-root * {
  box-sizing: border-box;
}

/* 20019: above menus (20010), toolbars (20015) and floating panels (20018),
 * below the snackbar (20020). See STRIDE_MODAL_Z_INDEX for why it moved. */
[data-stride-theme] .stride-modal-root {
  position: fixed;
  inset: 0;
  z-index: 20019;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

[data-stride-theme] .stride-modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--stride-bg-overlay);
}

[data-stride-theme] .stride-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: 100%;
  overflow: hidden;
  background: var(--stride-bg-surface-primary);
  color: var(--stride-ctn-primary);
  font-family: var(--stride-font-family);
  border-radius: var(--stride-radius-rad-3_5x);
  box-shadow: var(--stride-shadow-lg);
}

[data-stride-theme] .stride-modal-dialog[data-size="small"] {
  width: 460px;
}

[data-stride-theme] .stride-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

[data-stride-theme] .stride-modal-header {
  flex-shrink: 0;
  padding: 24px 52px 24px 24px;
}

/* Header actions sit flush left of Close (Figma 2797:94581: two 28px
 * buttons, no gap), so the title keeps clear of both. A child selector: a
 * modal opened inside this one renders inside its dialog, and must keep its
 * own header's padding. */
[data-stride-theme] .stride-modal-header-actions {
  position: absolute;
  top: 12px;
  right: 40px;
  z-index: 1;
  display: flex;
  align-items: center;
}

[data-stride-theme]
  .stride-modal-dialog[data-header-actions="true"]
  > .stride-modal-header {
  padding-right: 80px;
}

[data-stride-theme] .stride-modal-title {
  margin: 0;
  color: var(--stride-ctn-primary);
}

[data-stride-theme] .stride-modal-description {
  margin: var(--stride-spacing-spc-1_5x) 0 0;
  color: var(--stride-ctn-tertiary);
}

[data-stride-theme] .stride-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 24px 24px;
}

[data-stride-theme] .stride-modal-footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--stride-spacing-spc-2x);
  padding: 16px;
  background: var(--stride-bg-surface-primary);
  border-top: var(--stride-border-width-thic-1) solid var(--stride-bdr-divider);
}

[data-stride-theme] .stride-modal-footer-tertiary,
[data-stride-theme] .stride-modal-footer-main {
  display: flex;
  align-items: center;
  gap: var(--stride-spacing-spc-2x);
}

[data-stride-theme] .stride-modal-footer-main {
  margin-left: auto;
}

[data-stride-theme] .stride-modal-docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stride-spacing-spc-2x);
}

[data-stride-theme] .stride-modal-docs-filler {
  display: flex;
  flex-direction: column;
  gap: var(--stride-spacing-spc-2x);
  color: var(--stride-ctn-tertiary);
}

/*
 * Stride chart readout: the bubble a chart's hover readout renders inside
 * StrideChartTooltip. A heading, then one row per series (swatch, name,
 * value), and an optional total row. Shared by the line and stacked bar
 * charts; each draws its own swatch shape (a line, a block).
 * Pending design review — no Figma frame yet.
 * Tokens only. Scoped under [data-stride-theme]; the tooltip stamps the mode
 * on its own root, since it portals out of the chart's subtree.
 */

/* The bubble's own root carries the theme mode, so a page-level theme rule
 * (StrideAppLayout's `[data-stride-theme] { min-height: 100vh; background }`
 * on the design-system pages) would stretch it to the window's height,
 * filled, and the placement then flips it off the top. It sizes to its
 * readout, and the readout draws the surface. */
[data-stride-theme].stride-chart-bubble {
  min-height: 0;
  background: none;
}

[data-stride-theme] .stride-chart-readout {
  display: flex;
  flex-direction: column;
  gap: var(--stride-spacing-spc-1x);
  min-width: 160px;
  padding: var(--stride-spacing-spc-2x) var(--stride-spacing-spc-2_5x);
  color: var(--stride-ctn-primary);
  background: var(--stride-bg-surface-primary);
  border: var(--stride-border-width-thic-1) solid var(--stride-bdr-light);
  border-radius: var(--stride-radius-rad-2x);
  box-shadow: var(--stride-shadow-md);
}

[data-stride-theme] .stride-chart-readout p {
  margin: 0;
}

[data-stride-theme] .stride-chart-readout-row {
  display: flex;
  align-items: center;
  gap: var(--stride-spacing-spc-1_5x);
}

[data-stride-theme] .stride-chart-readout-name {
  flex: 1;
  min-width: 0;
  color: var(--stride-ctn-secondary);
}

[data-stride-theme] .stride-chart-readout-value {
  font-variant-numeric: tabular-nums;
}

[data-stride-theme] .stride-chart-readout-total {
  padding-top: var(--stride-spacing-spc-1x);
  border-top: var(--stride-border-width-thic-1) solid var(--stride-bdr-light);
}

/* StrideGreetingReveal. Pending design review: no Figma frame yet.

   Portaled where Stride's overlays go at 20040, the top of the overlay
   ladder (the story viewer's), inside a dark StrideThemeProvider, so every
   selector here resolves under `[data-stride-theme]`. */

[data-stride-theme] .stride-greeting-reveal,
[data-stride-theme] .stride-greeting-reveal * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-greeting-reveal {
  position: fixed;
  inset: 0;
  z-index: 20040;
  display: flex;
  /* Centred when it fits, scrolled when it doesn't (a phone on its side);
     a swipe never moves the page behind it. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 64px 16px 32px;
  background: var(--stride-color-gray-1000);
  color: var(--stride-color-transparent-white-1000);
  /* Portaled outside the page: its text inherits from here. */
  font-family: var(--stride-font-family);
  /* Focused on open so keys land here; not a control, so no ring. */
  outline: none;
}

[data-stride-theme] .stride-greeting-reveal-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stride-spacing-spc-5x);
  width: min(340px, 100%);
  margin: auto;
  /* Depth for the card's turn: without it, it narrows flat and widens
     mirrored. */
  perspective: 1200px;
}

[data-stride-theme] .stride-greeting-reveal-title {
  margin: 0;
  text-align: center;
  transition: opacity 300ms ease;
}

/* Open, the card is signed: the title fades but keeps its place (the card
   doesn't jump as it turns) and stays the dialog's name. */
[data-stride-theme] .stride-greeting-reveal-title--faded {
  opacity: 0;
}

/* The card turning over: its face (in the flow, so it sets the height) and
   its back over it, each hidden while it faces away. */
[data-stride-theme] .stride-greeting-reveal-turn {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-stride-theme] .stride-greeting-reveal-turn--open {
  transform: rotateY(180deg);
}

[data-stride-theme] .stride-greeting-reveal-turn--instant {
  transition: none;
}

[data-stride-theme] .stride-greeting-reveal-face,
[data-stride-theme] .stride-greeting-reveal-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

[data-stride-theme] .stride-greeting-reveal-face {
  transform: rotateY(180deg);
  /* Focused as it opens so a screen reader reads it; not a control. */
  outline: none;
}

[data-stride-theme] .stride-greeting-reveal-face .stride-greeting-card {
  width: 100%;
}

[data-stride-theme] .stride-greeting-reveal-back {
  position: absolute;
  inset: 0;
  cursor: pointer;
  /* Its own 3D layer, so older WebKit hides it once it faces away. */
  transform: rotateY(0deg);
}

/* Turned away: the face under it takes the taps (and a note's selection). */
[data-stride-theme]
  .stride-greeting-reveal-turn--open
  .stride-greeting-reveal-back {
  pointer-events: none;
  cursor: default;
}

[data-stride-theme] .stride-greeting-reveal-back .stride-greeting-card {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

[data-stride-theme] .stride-greeting-reveal-actions {
  display: flex;
  justify-content: center;
  gap: var(--stride-spacing-spc-3x);
}

[data-stride-theme] .stride-greeting-reveal-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--stride-radius-rad-full);
  background: var(--stride-color-transparent-white-100);
  color: var(--stride-color-transparent-white-1000);
  cursor: pointer;
}

[data-stride-theme] .stride-greeting-reveal-close:hover {
  background: var(--stride-color-transparent-white-200);
}

[data-stride-theme] .stride-greeting-reveal-close:focus-visible {
  outline: none;
  box-shadow: var(--stride-shadow-focus);
}

[data-stride-theme] .stride-greeting-reveal-close svg {
  width: 20px;
  height: 20px;
}

/*
 * Stride Line Chart.
 * Pending design review — no Figma frame yet; follows the client dashboard
 * design canvas (Scoreboard, "Strength"; the exercise page's "e1RM by week"
 * for marks, bands and the goal). The lines and dots are coloured from props
 * (resolved palette tokens); this file styles the legend, the SVG text (visx
 * renders plain <text>, which doesn't inherit the page font) and the marks,
 * goal and "now" upright.
 * The tooltip's bubble is StrideChartTooltip's (stride_chart_tooltip.css).
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-line-chart,
[data-stride-theme] .stride-line-chart * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-line-chart {
  display: flex;
  flex-direction: column;
  gap: var(--stride-spacing-spc-2x);
  width: 100%;
  /* visx sizes the SVG from this box; without it a flex child can report a
   * wider "ideal" width than its row has and clip the last tick. */
  min-width: 0;
}

[data-stride-theme] .stride-line-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stride-spacing-spc-1x) var(--stride-spacing-spc-3x);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-stride-theme] .stride-line-chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--stride-spacing-spc-1_5x);
  min-width: 0;
  color: var(--stride-ctn-secondary);
}

/* A short line, not a dot: it reads as "this line". */
[data-stride-theme] .stride-line-chart-swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 3px;
  border-radius: var(--stride-radius-rad-full);
}

/* A marked point (a PR): a dot ringed in the card's colour. */
[data-stride-theme] .stride-line-chart-swatch--mark {
  width: 8px;
  height: 8px;
}

/* The goal: a short dashed line. Its colour is the first series'. */
[data-stride-theme] .stride-line-chart-swatch--goal {
  /* Wide enough for two dashes, or it reads as a solid line. */
  width: 18px;
  height: 0;
  border-top: 2px dashed;
  border-radius: 0;
}

/* A reading (a daily weigh-in): a small dot, as on the plot. */
[data-stride-theme] .stride-line-chart-swatch--scatter {
  width: 6px;
  height: 6px;
}

/* Today: a short dashed upright, as on the plot. */
[data-stride-theme] .stride-line-chart-swatch--now {
  width: 0;
  height: 12px;
  border-left: 1px dashed var(--stride-ctn-tertiary);
  border-radius: 0;
}

/* A band, in the readout: a small square at full colour (square, so it
   never reads as the round mark). */
[data-stride-theme] .stride-line-chart-swatch--band {
  width: 8px;
  height: 8px;
  border-radius: 0;
}

[data-stride-theme] .stride-line-chart-mark {
  stroke: var(--stride-bg-surface-primary);
  stroke-width: 2px;
}

[data-stride-theme] .stride-line-chart-goal {
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 4 4;
}

[data-stride-theme] .stride-line-chart-goal-point {
  fill: var(--stride-bg-surface-primary);
  stroke-width: 2px;
}

[data-stride-theme] .stride-line-chart-now {
  stroke: var(--stride-ctn-tertiary);
  stroke-width: 1px;
  stroke-dasharray: 3 3;
}

[data-stride-theme] .stride-line-chart-band-label {
  fill: var(--stride-ctn-secondary);
  font-family: var(--stride-font-family);
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-medium);
}

[data-stride-theme] .stride-line-chart .visx-axis-tick text,
[data-stride-theme] .stride-line-chart-end-label {
  font-family: var(--stride-font-family);
  font-size: var(--stride-font-size-12);
}

[data-stride-theme] .stride-line-chart .visx-axis-tick text {
  font-weight: var(--stride-font-weight-regular);
}

[data-stride-theme] .stride-line-chart-end-label {
  font-weight: var(--stride-font-weight-semibold);
}


/*# sourceMappingURL=5616-8bdb0233.css.map*/