/* DO NOT EDIT. Generated by company/canon/marketing/design-system/build.py on 2026-10-02. Edit the source and run the build. The lint hook rejects hand edits. */
/* app.staytch.com: import this file before the app styles. kit/app.css shows how the dashboard uses the tokens. Source: tokens.css. */

:root {
  /* ---------- Color: brand ---------- */
  --tch-teal: #126B69;          /* the one teal. Links, primary button, "after" money, status */
  --tch-teal-ink: #0D524F;      /* hover and pressed teal, teal text on teal tint */
  --tch-teal-tint: #E7F1F0;     /* "after" panel, selected tab, chip ground */
  --tch-teal-line: #C9E0DD;     /* border on teal tint */
  --tch-teal-on: #FFFFFF;       /* text on teal */
  --tch-teal-on-soft: #D6ECEA;  /* secondary text on teal */
  --tch-sky: #6FB6E0;           /* the sky end of the signature gradient (2026-09-30). Only inside --tch-grad and the sprite gradients; never a fill, never text */
  --tch-gold: #FFBD15;          /* accent: up to five uses a page. Never text on white. Never a button fill. See NOTES.md */
  --tch-gold-tint: #FFD754;     /* end stop of the gold rule */
  --tch-gold-wash: #FFF6DB;     /* ground of the gold chip */
  --tch-gold-ink: #6B4E00;      /* text on gold wash or on gold */

  /* ---------- Color: neutrals (cool, one family) ---------- */
  --tch-canvas: #FAFEFF;        /* page ground, cool white */
  --tch-alt: #F5F7FA;           /* alternate section ground */
  --tch-card: #FFFFFF;          /* card ground, as in the ad */
  --tch-ink: #1A1B1F;           /* headlines, "before" money uses --tch-text */
  --tch-text: #525252;          /* body text, charcoal */
  --tch-slate: #485C66;         /* secondary text, icons */
  --tch-muted: #63686E;         /* captions and meta. Darker than v1 #8C8D91 so it passes AA */
  --tch-line: #D7E1E4;          /* card and input borders */
  --tch-line-soft: #E6EDEF;     /* dividers inside cards */
  --tch-before: #EDEFF1;        /* the greyscale "before" panel */
  --tch-before-line: #DADDE0;
  --tch-chip: #EEF2F3;          /* neutral chip ground */

  /* ---------- Color: status (always paired with a word) ---------- */
  --tch-red: #A8241D;
  --tch-red-tint: #FDF1F0;
  --tch-red-line: #F2C9C6;
  --tch-amber: #8A4B08;
  --tch-amber-tint: #FFF4E5;

  /* ---------- Color: overlays ---------- */
  --tch-scrim: linear-gradient(180deg, rgba(14, 28, 32, 0.38) 0%, rgba(14, 28, 32, 0.74) 100%);
  --tch-on-photo: #FFFFFF;
  --tch-focus: #126B69;

  /* ---------- Type: families ---------- */
  --tch-font-display: "Merriweather", Georgia, "Times New Roman", serif; /* headlines and money, 700 */
  --tch-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Type: scale (rem, base 16) ---------- */
  --tch-fs-display: clamp(2.125rem, 1.35rem + 3.2vw, 3.75rem);  /* page h1: 34 to 60 */
  --tch-fs-h1-article: clamp(2rem, 1.5rem + 2vw, 3rem);         /* article title: 32 to 48 */
  --tch-fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);         /* section heading: 26 to 40 */
  --tch-fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);         /* 20 to 24 */
  --tch-fs-h4: 1.125rem;                                        /* 18 */
  --tch-fs-money-xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);   /* earnings card money: 36 to 60 */
  --tch-fs-money-lg: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);     /* value card money: 28 to 36 */
  --tch-fs-money-md: 1.5rem;                                    /* 24 */
  --tch-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);       /* 17 to 20 */
  --tch-fs-body: 1rem;                                          /* 16, the body floor */
  --tch-fs-article: 1.125rem;                                   /* 18, long-form body */
  --tch-fs-small: 0.875rem;                                     /* 14, the meta floor */
  --tch-fs-label: 0.875rem;                                     /* 14, uppercase labels */

  --tch-lh-display: 1.18;
  --tch-lh-heading: 1.25;
  --tch-lh-body: 1.6;
  --tch-lh-article: 1.72;
  --tch-lh-tight: 1.1;
  --tch-ls-display: -0.015em;
  --tch-ls-label: 0.08em;
  --tch-fw-regular: 400;
  --tch-fw-medium: 500;
  --tch-fw-semibold: 600;
  --tch-fw-bold: 700;

  /* ---------- Space: 4 px base ---------- */
  --tch-sp-1: 0.25rem;   /* 4 */
  --tch-sp-2: 0.5rem;    /* 8 */
  --tch-sp-3: 0.75rem;   /* 12 */
  --tch-sp-4: 1rem;      /* 16 */
  --tch-sp-5: 1.5rem;    /* 24 */
  --tch-sp-6: 2rem;      /* 32 */
  --tch-sp-7: 3rem;      /* 48 */
  --tch-sp-8: 4rem;      /* 64 */
  --tch-sp-9: 6rem;      /* 96 */
  --tch-sp-10: 8rem;     /* 128 */
  --tch-section-y: clamp(3.5rem, 2.4rem + 4.6vw, 7rem);  /* vertical section padding */
  --tch-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);    /* page side padding */

  /* ---------- Layout ---------- */
  --tch-w-page: 75rem;      /* 1200 */
  --tch-w-narrow: 56rem;    /* 896 */
  --tch-w-measure: 42rem;   /* 672: 60 to 75 characters at 18 px Inter */
  --tch-w-app: 68rem;       /* dashboard column */
  --tch-nav-h: 4.5rem;      /* 72 */
  --tch-tap: 2.75rem;       /* 44, the tap-target floor */

  /* ---------- Radius: one documented rule ----------
     Controls (buttons, chips, tabs) are pills. Inputs are sm. Cards are md.
     Photo cards are lg, as in the ad. The float card and the device frame are xl. */
  --tch-r-xs: 0.375rem;   /* 6: focus ring corners, bar ends */
  --tch-r-sm: 0.625rem;   /* 10: inputs, logo chip */
  --tch-r-md: 0.875rem;   /* 14: cards */
  --tch-r-lg: 1.125rem;   /* 18: photo cards */
  --tch-r-xl: 1.5rem;     /* 24: float card, device frame */
  --tch-r-pill: 999px;

  /* ---------- Shadow: tinted to the cool ground, never pure black ---------- */
  --tch-shadow-1: 0 1px 2px rgba(18, 56, 62, 0.06);
  --tch-shadow-2: 0 1px 2px rgba(18, 56, 62, 0.05), 0 8px 24px rgba(18, 56, 62, 0.08);
  --tch-shadow-3: 0 2px 4px rgba(18, 56, 62, 0.05), 0 24px 56px rgba(18, 56, 62, 0.13);
  --tch-ring: 0 0 0 3px rgba(18, 107, 105, 0.28);

  /* ---------- Motion ---------- */
  --tch-dur-1: 140ms;
  --tch-dur-2: 240ms;
  --tch-dur-3: 520ms;
  --tch-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tch-reveal-shift: 14px;
  --tch-ticker-dur: 70s;

  /* ---------- Gold rule (the ad lockup device) ---------- */
  --tch-rule-w: 3.5rem;
  --tch-rule-h: 3px;
  --tch-rule: linear-gradient(90deg, var(--tch-gold), var(--tch-gold-tint));
  /* Logo row: one grey for every partner mark. The GSA file has opaque white letters, so it keeps them. */
  --tch-filter-logo: brightness(0);
  --tch-opacity-logo: 0.5;
  --tch-filter-logo-knockout: brightness(0.58) contrast(10);
  /* Added in look round 2: sizes that were local values in site.css and app.css */
  --tch-fs-h1-video: clamp(2rem, 1.3rem + 3vw, 3.5rem);         /* owners hero h1 on the video: 32 to 56 */
  --tch-fs-h1-app: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);     /* dashboard page h1: 28 to 40 */
  --tch-fs-h2-article: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem);/* article h2: 24 to 30 */
  --tch-fs-h3-article: 1.25rem;                                 /* article h3 and card title: 20 */
  --tch-fs-principle: 1.125rem;                                 /* serif principle line: 18 */
  --tch-fs-device-h: 1.375rem;                                  /* heading inside the device frame: 22 */
  --tch-bw-1: 1px;          /* hairline */
  --tch-bw-15: 1.5px;       /* control outline */
  --tch-bw-2: 2px;          /* rule, focus ring */
  --tch-bw-3: 3px;          /* principle rule */
  --tch-focus-offset: 3px;
  --tch-device-bezel: 0.5rem;
  --tch-r-device: 2.25rem;
  --tch-appbar-h: 4rem;
  --tch-chart-h: 12rem;
  --tch-avatar: 2.25rem;
  --tch-logo-h-sm: 1.375rem;
  --tch-logo-h-md: 1.75rem;
  --tch-logo-h-lg: 2.125rem;
  --tch-logo-h-tall-sm: 2rem;
  --tch-logo-h-tall-md: 2.5rem;
  --tch-logo-h-tall-lg: 3rem;
  --tch-logo-h-row: 1.5rem;
  --tch-w-copy-xs: 30rem;
  --tch-w-copy-sm: 34rem;
  --tch-w-copy-md: 38rem;
  --tch-w-copy: 40rem;
  --tch-w-copy-lg: 44rem;
  --tch-w-copy-xl: 50rem;
  /* Added in refinement round 3 (Julia + Mark, 2026-09-21) */
  --tch-scrim-band: linear-gradient(180deg, rgba(8, 30, 32, 0.74) 0%, rgba(8, 30, 32, 0.86) 100%);           /* photo band, text across the full width */
  --tch-scrim-band-side: linear-gradient(90deg, rgba(8, 30, 32, 0.88) 0%, rgba(8, 30, 32, 0.7) 52%, rgba(8, 30, 32, 0.22) 100%); /* photo band, text on the left */
  --tch-line-on-photo: rgba(255, 255, 255, 0.3);   /* divider on a photo band */
  --tch-hl-gold: rgba(255, 189, 21, 0.42);         /* highlighter band under the hero keyword */
  --tch-count-dur: 900ms;                          /* count-up on a stat numeral */
  --tch-control-sm: 2.5rem;                        /* 40: compact control, fine pointers only */
  --tch-band-min-h: 26rem;
  --tch-shape-sm: 3rem;
  --tch-shape-md: 7rem;
  --tch-shape-lg: 11rem;
  --tch-star-w: 1.25rem;
  --tch-skel-h: 0.625rem;
  --tch-sticky-z: 40;
  /* Themes from the Radius system (2026-09-22). Recolored to the TCH palette. The wave replaced the patterns and the gradient turned teal to sky on 2026-09-30. */
  --tch-pattern-op: 0.4;                           /* the wave on a page: 25 to 40% */
  --tch-pattern-op-deck: 0.34;                     /* the wave on a slide */
  --tch-wave-dur: 18s;                             /* one swell cycle. Constant, linear, never faster */
  --tch-wave-h: 62%;                               /* the wave's height at the foot of a section */
  --tch-wave-h-band: 78%;                          /* the wave's height on a teal band or a slide */
  --tch-wave-stroke: 1.5;                          /* SVG user units, non-scaling */
  --tch-wash: radial-gradient(120% 90% at 100% 0%, var(--tch-teal-tint) 0%, rgba(231, 241, 240, 0) 62%);   /* corner wash on a card */
  --tch-wash-gold: radial-gradient(70% 60% at 0% 100%, rgba(255, 189, 21, 0.16) 0%, rgba(255, 189, 21, 0) 60%); /* second corner, gold, accent only */
  --tch-panel-grad: linear-gradient(135deg, var(--tch-teal-ink) 0%, var(--tch-teal) 100%);                /* stat panel */
  --tch-grad: linear-gradient(90deg, var(--tch-teal) 0%, var(--tch-sky) 100%);                              /* the signature gradient, teal to sky: rules, connectors, the wave's stroke, underlines. Never a text fill on white, never a button fill */
  --tch-grad-v: linear-gradient(180deg, var(--tch-teal) 0%, var(--tch-sky) 100%);                            /* the same gradient, top to bottom */
  --tch-grad-light: linear-gradient(90deg, var(--tch-sky) 0%, var(--tch-teal-on) 100%);                      /* on a teal band: sky to white */
  --tch-connector: var(--tch-grad);                /* gradient rule, step track and lifecycle connector */
  --tch-connector-h: 3px;
  --tch-ring: 3px;                                 /* step number ring */
  --tch-step-size: 2.75rem;                        /* step number circle */
  --tch-step-stagger: 220ms;                       /* delay between steps after the track draws */
  --tch-step-delay: 260ms;                         /* first step waits for the track */
  --tch-lift: -2px;                                /* hover lift on a card */
  --tch-press: 0.97;                               /* press scale on a button */
  --tch-stagger: 90ms;                             /* reveal delay between siblings */
  --tch-draw-dur: 900ms;                           /* connector and rule draw */
  --tch-float-w: 11.5rem;
  --tch-progress-h: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tch-dur-1: 1ms;
    --tch-dur-2: 1ms;
    --tch-dur-3: 1ms;
    --tch-reveal-shift: 0px;
    --tch-stagger: 0ms;
    --tch-draw-dur: 1ms;
    --tch-step-stagger: 0ms;
    --tch-step-delay: 0ms;
  }
}