/*!
 * Remote Sensei design tokens — custom properties only.
 *
 * GENERATED. Do not edit by hand. Source of truth is the remote-sensei-design
 * skill cache at system-dev/skills/remote-sensei-design/cache/tokens/, which is
 * itself pulled from Claude Design project 3fa11084-c837-4b44-8538-6500c6d38ed2.
 * Cache .synced_at: 2026-08-07T13:36:07.986090Z
 *
 * Regenerate after re-syncing that cache:
 *   bash wp/hello-elementor-child/css/build-design-tokens.sh
 *
 * Deliberately EXCLUDES three files that the design system's own styles.css
 * imports, because this stylesheet loads site-wide on a live Elementor site and
 * must contribute zero selectors:
 *   - base.css          restyles body / h1-h5 / a
 *   - body-content.css  element rules for blog content
 *   - fonts.css         redeclares .fa / .fa-brands, which collides with the
 *                       theme's Font Awesome 7 Pro kit, and @font-faces OTFs
 *                       that do not exist in this theme
 *   - focus.css         :focus-visible rings — an opt-in visual change, not a token
 * Templates that want those behaviours should scope them locally.
 */

/* ── colors.css ─────────────────────────────────────────── */
/* Colours — transcribed verbatim from the "сolors" frame (30665:16885) of
   Remote Sensei Universe.fig. Ramp slot names are the file's own
   (dark-50 … 00 … light-50). All four ramps are complete 11-step ramps in
   the source; earlier versions of this file shipped Coral, Yellow and Grey
   with nine steps on the incorrect assumption that dark-50 and dark-20 were
   unspecified. They are specified, both as solid swatches and as gradient
   stops, and are restored below.

   Note on source precision: the palette card's 11-stop gradient bars differ
   from its solid swatches by ±1 in a single channel on a few steps
   (#35707D vs #35717D, #EBF1F2 vs #EBF2F2, #668689 vs #678689). The solid
   swatches are treated as authoritative here — do not "fix" these to the
   gradient values. */
:root {
  /* Teal — the brand ramp (11 steps) */
  --rs-teal-dark-50: #184149;
  --rs-teal-dark-40: #1F515B;
  --rs-teal-dark-30: #295D68;
  --rs-teal-dark-20: #316874;
  --rs-teal-dark-10: #35717D;
  --rs-teal-00: #408897;
  --rs-teal-light-10: #4B9EB0;
  --rs-teal-light-20: #69B9C9;
  --rs-teal-light-30: #8DD2E0;
  --rs-teal-light-40: #BDE6EF;
  --rs-teal-light-50: #F0F8F9;

  /* Coral (11 steps) */
  --rs-coral-dark-50: #762622;
  --rs-coral-dark-40: #A33833;
  --rs-coral-dark-30: #B73F3A;
  --rs-coral-dark-20: #C64843;
  --rs-coral-dark-10: #D9514B;
  --rs-coral-00: #F35B54;
  --rs-coral-light-10: #FF6D66;
  --rs-coral-light-20: #FF8580;
  --rs-coral-light-30: #FFADA9;
  --rs-coral-light-40: #FFCAC8;
  --rs-coral-light-50: #FFF4F3;

  /* Yellow (11 steps) */
  --rs-yellow-dark-50: #A8780A;
  --rs-yellow-dark-40: #BC8C1B;
  --rs-yellow-dark-30: #CF9C26;
  --rs-yellow-dark-20: #DDA72A;
  --rs-yellow-dark-10: #E5B137;
  --rs-yellow-00: #FFC94B;
  --rs-yellow-light-10: #FFD064;
  --rs-yellow-light-20: #FFD87D;
  --rs-yellow-light-30: #FFE3A3;
  --rs-yellow-light-40: #FFEBBD;
  --rs-yellow-light-50: #FFF5DE;

  /* Named Figma style `yellow/btn-hover` — the hover fill of the yellow
     filled button. Deliberately NOT a step of the yellow ramp. */
  --rs-yellow-btn-hover: #FFB710;

  /* Grey — a warm teal-leaning grey, not neutral (11 steps).
     light-20 is #B2C9CB in the palette card. It was previously #A0BABD,
     a value that does not appear anywhere in the palette frame; that colour
     is preserved below as --rs-disabled-ink so disabled states render
     unchanged. */
  --rs-grey-dark-50: #334647;
  --rs-grey-dark-40: #3E5355;
  --rs-grey-dark-30: #4A6264;
  --rs-grey-dark-20: #546E70;
  --rs-grey-dark-10: #5B7476;
  --rs-grey-00: #678689;
  --rs-grey-light-10: #84A1A4;
  --rs-grey-light-20: #B2C9CB;
  --rs-grey-light-30: #D8E2E3;
  --rs-grey-light-40: #EBF2F2;
  --rs-grey-light-50: #F9F9F9;

  /* Basic */
  --rs-black-prime: #34383C;
  --rs-black-second: #5D636A;
  --rs-white-pure: #FFFFFE;
  --rs-white-ivory: #F9FAF4;

  /* Extra literals the file uses outside the palette card.
     --rs-border-hairline was the previous name for grey-light-20; it is kept
     as an alias so existing consumers keep working. --rs-disabled-ink is the
     #A0BABD used by disabled control labels; it is not a palette ramp step. */
  --rs-border-hairline: var(--rs-grey-light-20);
  --rs-disabled-ink: #A0BABD;
  --rs-dot-ink: #3E4145;
  --rs-section-banner: #2BA5BA;

  /* ── Gradients ──────────────────────────────────────────────────
     All five named gradients in the palette card are fully specified there
     (both stops and an angle). Earlier versions shipped four of them as
     single "key" colours on the incorrect assumption that the second stop
     was missing. */
  --rs-gradient-teal-light-135: linear-gradient(135deg, #4B9EB0 0%, #408897 100%); /* @kind color */
  --rs-gradient-teal-dark: linear-gradient(135deg, #408897 0%, #35717D 100%); /* @kind color */
  --rs-gradient-yellow: linear-gradient(135.3deg, #FFD87D 0%, #FFC94B 100%); /* @kind color */
  --rs-gradient-coral: linear-gradient(135deg, #F18E70 0%, #F37465 100%); /* @kind color */
  --rs-gradient-brand: linear-gradient(225deg, #6797A5 0%, #CE7B7B 100%); /* @kind color */

  /* Angle variants of the teal-light gradient as drawn on specific nodes:
     130.365deg on the cookie card, 115.928deg behind portrait photography.
     --rs-gradient-teal-light keeps the cookie-card angle for backward
     compatibility; use --rs-gradient-teal-light-135 for the palette-card
     definition in new work. */
  --rs-gradient-teal-light: linear-gradient(130.365deg, #4B9EB0 0%, #408897 100%); /* @kind color */
  --rs-gradient-teal-light-115: linear-gradient(115.928deg, #4B9EB0 0%, #408897 100%); /* @kind color */

  /* The full-ramp spectrum bars drawn in the palette card. */
  --rs-gradient-teal-spectrum: linear-gradient(90deg, #184149 0%, #1F515B 10%, #295D68 20%, #316874 30%, #35717D 40%, #408897 50%, #4B9EB0 60%, #69B9C9 70%, #8DD2E0 80%, #BDE6EF 90%, #F0F8F9 100%); /* @kind color */
  --rs-gradient-coral-spectrum: linear-gradient(90deg, #762622 0%, #A33833 10%, #B73F3A 20%, #C64843 30%, #D9514B 40%, #F35B54 50%, #FF6D66 60%, #FF8580 70%, #FFADA9 80%, #FFCAC8 90%, #FFF4F3 100%); /* @kind color */
  --rs-gradient-yellow-spectrum: linear-gradient(90deg, #A8780A 0%, #BC8C1B 10%, #CF9C26 20%, #DDA72A 30%, #E5B137 40%, #FFC94B 50%, #FFD064 60%, #FFD87D 70%, #FFE3A3 80%, #FFEBBD 90%, #FFF5DE 100%); /* @kind color */
  --rs-gradient-grey-spectrum: linear-gradient(90deg, #334647 0%, #3E5355 10%, #4A6264 20%, #546E70 30%, #5B7476 40%, #678689 50%, #84A1A4 60%, #B2C9CB 70%, #D8E2E3 80%, #EBF2F2 90%, #F9F9F9 100%); /* @kind color */

  /* Superseded: single key colours kept so existing consumers keep working.
     Prefer the real gradients above. Note these picked inconsistently from
     the ramp — some are the start stop, some the end stop. */
  --rs-gradient-key-teal-light: #4B9EB0;
  --rs-gradient-key-teal-dark: #35717D;
  --rs-gradient-key-yellow: #FFC94B;
  --rs-gradient-key-coral: #F37465;
  --rs-gradient-key-brand: #6797A5;

  /* ── Semantic aliases ───────────────────────────────────────────── */
  --rs-text-primary: var(--rs-black-prime);
  --rs-text-secondary: var(--rs-black-second);
  --rs-text-muted: var(--rs-grey-00);
  --rs-text-inverse: var(--rs-white-pure);
  --rs-text-accent: var(--rs-teal-00);
  --rs-text-link: var(--rs-teal-00);
  --rs-text-link-hover: var(--rs-coral-00);
  /* text-error was coral-light-10. That was wrong, not merely inaccessible:
     the error instance of atom/validation (30590:2369) is coral-00 #F35B54.
     Corrected here — it is both the faithful value and the higher-contrast one.
     Contrast note: coral-00 and teal-00 on white both still fall short of WCAG
     AA 4.5:1 for body-size text. Keeping them is a deliberate brand decision;
     coral-dark-10 and teal-dark-10 are the nearest passing steps of their own
     ramps if that decision is ever revisited. */
  --rs-text-error: var(--rs-coral-00);
  --rs-text-disabled: var(--rs-disabled-ink);
  --rs-text-on-dark-accent: var(--rs-yellow-00);

  --rs-surface-page: var(--rs-white-pure);
  --rs-surface-ivory: var(--rs-white-ivory);
  --rs-surface-card: var(--rs-grey-light-50);
  --rs-surface-tint: var(--rs-teal-light-50);
  --rs-surface-tint-strong: var(--rs-teal-light-40);
  --rs-surface-dark: var(--rs-black-prime);
  --rs-surface-brand: var(--rs-teal-00);
  --rs-surface-disabled: var(--rs-grey-light-30);

  --rs-border-default: var(--rs-grey-light-20);
  --rs-border-subtle: var(--rs-grey-light-20);
  --rs-border-strong: var(--rs-black-prime);
  --rs-border-brand: var(--rs-teal-00);

  --rs-accent-yellow: var(--rs-yellow-00);
  --rs-accent-coral: var(--rs-coral-00);
}

/* ── typography.css ─────────────────────────────────────────── */
/* Typography — the file's own scale, verified against the `typography` frame
   (30665:16853). Desktop and mobile ladders are separate named styles in Figma;
   both are tokenised. Line-heights are unitless percentages exactly as authored
   (e.g. 130% -> 1.3). */
:root {
  --rs-font-display: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rs-font-body: "Hind Madurai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rs-font-serif: Lora, ui-serif, Georgia, "Times New Roman", serif;
  --rs-font-script: "Dancing Script", cursive;
  --rs-font-icon: "Font Awesome 7 Pro";  /* @kind font */
  --rs-font-icon-brands: "Font Awesome 7 Brands";  /* @kind font */

  --rs-weight-regular: 400;  /* @kind font */
  --rs-weight-medium: 500;  /* @kind font */
  --rs-weight-semibold: 600;  /* @kind font */
  --rs-weight-bold: 700;  /* @kind font */
  --rs-weight-extrabold: 800;  /* @kind font */
  --rs-weight-black: 900;  /* @kind font */

  /* Headings — desktop (Montserrat Bold) */
  --rs-h1-size: 48px;   --rs-h1-lh: 1.2;  /* @kind other */
  --rs-h2-size: 40px;   --rs-h2-lh: 1.3;  /* @kind other */
  --rs-h3-size: 32px;   --rs-h3-lh: 1.3;  /* @kind other */
  --rs-h4-size: 24px;   --rs-h4-lh: 1.4;  /* @kind other */
  --rs-h5-size: 20px;   --rs-h5-lh: 1.4;  /* @kind other */

  /* Headings — mobile */
  --rs-h1-size-mobile: 32px; --rs-h1-lh-mobile: 1.2;  /* @kind other */
  --rs-h2-size-mobile: 30px; --rs-h2-lh-mobile: 1.2;  /* @kind other */
  --rs-h3-size-mobile: 24px; --rs-h3-lh-mobile: 1.3;  /* @kind other */
  --rs-h4-size-mobile: 18px; --rs-h4-lh-mobile: 1.4;  /* @kind other */
  --rs-h5-size-mobile: 15px; --rs-h5-lh-mobile: 1.4;  /* @kind other */

  /* Text — desktop (Hind Madurai) */
  --rs-text-m-size: 20px;  --rs-text-m-lh: 1.6;  /* @kind other */
  --rs-text-2s-size: 16px; --rs-text-2s-lh: 1.6;  /* @kind other */
  --rs-text-s-size: 16px;  --rs-text-s-lh: 1.5;  /* @kind other */
  --rs-text-xs-size: 14px; --rs-text-xs-lh: 1.5;  /* @kind other */
  --rs-text-2xs-size: 10px; --rs-text-2xs-lh: 1;  /* @kind other */

  /* Text — mobile. xs is 12/1.4: both the typography frame and molecula/form
     agree on 1.4, correcting an earlier 1.5. */
  --rs-text-m-size-mobile: 16px;  --rs-text-m-lh-mobile: 1.6;  /* @kind other */
  --rs-text-2s-size-mobile: 14px; --rs-text-2s-lh-mobile: 1.6;  /* @kind other */
  --rs-text-s-size-mobile: 14px;  --rs-text-s-lh-mobile: 1.5;  /* @kind other */
  --rs-text-xs-size-mobile: 12px; --rs-text-xs-lh-mobile: 1.4;  /* @kind other */

  /* Blog / editorial (Lora) */
  --rs-blog-m-size: 18px;  --rs-blog-m-lh: 1.6;  /* @kind other */
  --rs-blog-s-size: 16px;  --rs-blog-s-lh: 1.5;  /* @kind other */
  --rs-blog-xs-size: 14px; --rs-blog-xs-lh: 1.4;  /* @kind other */
  --rs-blog-m-size-mobile: 16px;
  --rs-blog-s-size-mobile: 14px;
  --rs-blog-xs-size-mobile: 12px;
  /* Quotes run at 1.65. The frame carries both a 16px and a 14px quote style. */
  --rs-quote-size: 16px;   --rs-quote-lh: 1.65;  /* @kind other */
  --rs-quote-size-small: 14px;  /* @kind other */

  /* Button labels (Montserrat, all at 100% line-height).
     Verified against both the typography frame and atom/btns: the primary L
     label is 16px, NOT 18px. The frame contains no Montserrat 18/100% at all —
     the earlier 18px was the h4-mobile heading style (700 18/1.4) mislabelled
     as a button size. */
  --rs-btn-prime-size: 16px;      /* Bold 16/100% — desktop L */
  --rs-btn-prime-size-mobile: 14px;  /* Bold 14/100% — mobile L */
  --rs-btn-secondary-size: 14px;  /* SemiBold 14/100%, uppercase — M */

  /* Icon sizes (Font Awesome) */
  --rs-icon-l: 24px;
  --rs-icon-2m: 20px;
  --rs-icon-m: 18px;
  --rs-icon-s: 14px;
  --rs-icon-xs: 10px;
}

/* ── spacing.css ─────────────────────────────────────────── */
/* Spacing — the auto-layout gaps and paddings actually used across the file.
   The source keeps one Figma Variable (Spacing/2XS); the rest are literals,
   collected here as a scale. Note the 5 / 10 / 15 / 30 rung: this system is
   NOT on a strict 4/8 grid and should not be snapped to one. */
:root {
  --rs-space-3xs: 2px;
  --rs-space-2xs: 4px;
  --rs-space-xs: 5px;
  --rs-space-s: 8px;
  --rs-space-sm: 10px;
  --rs-space-m: 12px;
  --rs-space-md: 15px;
  --rs-space-l: 16px;
  --rs-space-lg: 20px;
  --rs-space-xl: 24px;
  --rs-space-2xl: 30px;
  --rs-space-3xl: 32px;
  --rs-space-4xl: 40px;

  /* Layout */
  --rs-page-width: 1440px;
  --rs-page-gutter: 147px;   /* header/footer desktop inset */
  --rs-header-height: 76px;
  --rs-content-width: 1146px;
  --rs-card-width: 362px;    /* the canonical 3-up card column */
}

/* ── elevation.css ─────────────────────────────────────────── */
/* Radii, borders, shadows and the dotted background pattern. */
:root {
  --rs-radius-xs: 4px;      /* buttons, inputs, cards — the default */
  --rs-radius-s: 5px;
  --rs-radius-m: 8px;
  --rs-radius-l: 24px;      /* spec / feature panels */
  --rs-radius-xl: 36px;
  --rs-radius-pill: 100px;
  --rs-radius-circle: 50%;

  --rs-border-width: 1px;
  --rs-border-width-strong: 2px;   /* outline buttons */

  /* Button elevation ladder — rest → hover → press */
  --rs-shadow-btn: 0px 20px 40px -10px rgba(38,50,56,0.2);
  --rs-shadow-btn-hover: 0px 10px 20px -5px rgba(38,50,56,0.3);
  --rs-shadow-btn-active: 0px 5px 10px -5px rgba(38,50,56,0.4);

  /* Big soft lift for floating panels */
  --rs-shadow-big: 0px 20px 20px -10px rgba(47,47,47,0.05), 0px 50px 60px -30px rgba(47,47,47,0.1);
  --rs-shadow-soft: 0px 4px 4px 0px rgba(0,0,0,0.25);

  --rs-shadow-color-teal: rgba(53,113,125,0.15);
  --rs-shadow-color-ink: rgba(38,50,56,0.2);

  /* dots for backgrounds: 2px dots on a 12px pitch */
  --rs-dots: radial-gradient(circle at 1px 1px, var(--rs-dot-ink) 1px, transparent 1px);
  --rs-dots-size: 12px 12px;
}

/* ── motion.css ─────────────────────────────────────────── */
/* Motion.
   The source is NOT motion-less: the outline button families declare real
   Figma prototype reactions — ON_HOVER and ON_PRESS, both SMART_ANIMATE at
   **300ms, ease-in** (e.g. atoms 30648:5906 → 30648:5922 → 30648:5932 for
   desktop teal; 30650:21878 → 30650:21880 for mobile teal, which fires
   ON_PRESS only because mobile has no hover state). Those verified values
   drive --rs-transition below.

   --rs-duration / --rs-ease are the earlier house convention (200ms on a
   standard ease). They are kept because other components reference them, but
   they are a convention, not a transcription — prefer the -state pair for
   anything the file actually specifies. */
:root {
  /* Verified from the source's prototype reactions */
  --rs-duration-state: 300ms; /* @kind other */
  /* The size=S label chip (31750:18722) animates faster than everything else */
  --rs-duration-chip: 150ms; /* @kind other */
  --rs-ease-state: ease-in; /* @kind other */

  /* Links are the one place the file uses ease-OUT, and at 200ms:
     `Link text` (38350:31472 -> 33721:24692) is ON_HOVER, 200ms, ease-out.
     Four distinct timings are authored in the source — 150ms chip, 200ms link,
     300ms buttons and fields, 400ms whole-card — so don't collapse them. */
  --rs-duration-link: 200ms; /* @kind other */
  --rs-ease-out: ease-out; /* @kind other */

  /* Whole-card hover. cta-card (31800:22593 -> 31800:22595) is SMART_ANIMATE
     400ms **ease-in-out** — the only ease-in-out in the audited set, and the
     only 400ms. Its mobile default -> focus hop (31800:22677 -> 31800:22751)
     drops to 150ms ease-in, which is also every CTA-blog variant's timing
     (31528:21730, ON_HOVER desktop / ON_PRESS mobile). */
  --rs-duration-card: 400ms; /* @kind other */
  --rs-ease-card: ease-in-out; /* @kind other */

  /* House convention, unverified against the source */
  --rs-duration-fast: 120ms; /* @kind other */
  --rs-duration: 200ms; /* @kind other */
  --rs-duration-slow: 320ms; /* @kind other */
  --rs-ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  --rs-transition: color var(--rs-duration-state) var(--rs-ease-state), background-color var(--rs-duration-state) var(--rs-ease-state), box-shadow var(--rs-duration-state) var(--rs-ease-state), border-color var(--rs-duration-state) var(--rs-ease-state); /* @kind other */
  --rs-transition-chip: color var(--rs-duration-chip) var(--rs-ease-state), background-color var(--rs-duration-chip) var(--rs-ease-state); /* @kind other */
  --rs-transition-link: color var(--rs-duration-link) var(--rs-ease-out), text-decoration-color var(--rs-duration-link) var(--rs-ease-out); /* @kind other */
  --rs-transition-card: color var(--rs-duration-card) var(--rs-ease-card), background-color var(--rs-duration-card) var(--rs-ease-card), box-shadow var(--rs-duration-card) var(--rs-ease-card); /* @kind other */
  --rs-transition-card-mobile: color var(--rs-duration-chip) var(--rs-ease-state), background-color var(--rs-duration-chip) var(--rs-ease-state), box-shadow var(--rs-duration-chip) var(--rs-ease-state); /* @kind other */
  /* atom/icon-close shares the 200ms ease-out pair, and animates its glyph SIZE
     as well as its colour (18px -> 20px on hover). Its release back to default
     is faster still, 100ms. */
  --rs-duration-release: 100ms; /* @kind other */
  --rs-transition-icon: color var(--rs-duration-link) var(--rs-ease-out), font-size var(--rs-duration-link) var(--rs-ease-out); /* @kind other */
}