/**
 * @file tokens-light.css
 * @title Design Tokens - Light Theme
 * @description CSS custom properties (variables) for the ID.me Design System light theme.
 *              These tokens define colors, spacing, typography, and other design values.
 *
 * @author Fragno Team
 * @version 1.1.0
 * @updated 2026-01-16 - Added semantic tokens and additional primitive tokens
 */

:root,
:host {
  /* ============================================
      COLORS - Primary
      ============================================ */
  --colors-primary-default: #141414;
  --colors-primary-hover: #424242;
  --colors-primary-disabled: #f5f5f5;
  --colors-primary-text: #ffffff;
  --colors-primary-text-disabled: #a3a3a3;

  /* ============================================
      COLORS - Secondary
      ============================================ */
  --colors-secondary-default: #ffffff;
  --colors-secondary-hover: #f7f7f7;
  --colors-secondary-border: var(--colors-gray-400);
  --colors-secondary-border-hover: #737373;
  --colors-secondary-border-focused: #737373;
  --colors-secondary-text: #141414;
  --colors-secondary-text-hover: #292929;
  --colors-secondary-text-disabled: #a3a3a3;

  /* ============================================
      COLORS - Tertiary
      ============================================ */
  --colors-tertiary-default: #ffffff;
  --colors-tertiary-hover: #e5e5e5;
  --colors-tertiary-text: #141414;
  --colors-tertiary-text-hover: #424242;
  --colors-tertiary-text-disabled: #a3a3a3;

  /* ============================================
      COLORS - Focus & Effects
      ============================================ */
  --colors-focus-ring: #155eef;
  --colors-focus-shadow: rgba(10, 13, 18, 0.05);
  --colors-shadow-skeumorphic-inner-border: rgba(10, 13, 18, 0.18);
  --colors-shadow-skeumorphic-inner: rgba(10, 13, 18, 0.05);

  /* ============================================
      COLORS - Disabled
      ============================================ */
  --colors-disabled-border: #e5e5e5;
  --colors-disabled-background: #f5f5f5;
  --colors-disabled-foreground: #a3a3a3;

  /* ============================================
      COLORS - Gray Scale
      ============================================ */
  --colors-gray-50: #f7f7f7;
  --colors-gray-900: #141414;
  --colors-gray-800: #292929;
  --colors-gray-700: #424242;
  --colors-gray-600: #737373;
  --colors-gray-500: #737373;
  --colors-gray-400: #a3a3a3;
  --colors-gray-border: #94979c;
  --colors-gray-300: #d6d6d6;
  --colors-gray-200: #e5e5e5;
  --colors-gray-100: #f5f5f5;
  /* Segment control selected pill (Nova Web — Figma Gray dark mode 200) */
  --fragno-segment-pill-grey: #ececed;

  /* ============================================
      COLORS - Component / Alpha (Nova)
      ============================================ */
  /* Alpha white — overlays, borders, text on dark (e.g. avatar, modals) */
  --colors-alpha-white-90: rgba(255, 255, 255, 0.9);
  --colors-alpha-white-80: rgba(255, 255, 255, 0.8);
  --colors-alpha-white-50: rgba(255, 255, 255, 0.5);
  --colors-alpha-white-30: rgba(255, 255, 255, 0.3);
  --colors-alpha-white-25: rgba(255, 255, 255, 0.25);
  --colors-alpha-white-70: rgba(255, 255, 255, 0.7);
  /* Alpha black — shadows, backdrops */
  --colors-alpha-black-06: rgba(0, 0, 0, 0.06);

  /* ============================================
      COLORS - Blue (Interactive)
      ============================================ */
  --colors-blue-50: #eff4ff;
  --colors-blue-100: #d1e0ff;
  --colors-blue-300: #84adff;
  --colors-blue-500: #2970ff;
  --colors-blue-600: #1d5fef;
  --colors-blue-700: #004eeb;
  --colors-blue-800: #0040c1;

  /* ============================================
      COLORS - Red (Error/Danger)
      ============================================ */
  --colors-red-50: #fef3f2;
  --colors-red-300: #fda29b;
  --colors-red-600: #e53e3e;
  --colors-red-700: #b42318;

  /* ============================================
      COLORS - Green (Success)
      ============================================ */
  --colors-green-50: #edfcf2;
  --colors-green-300: #73e2a3;
  --colors-green-600: #32a467;
  --colors-green-700: #2d8a5c;
  --colors-green-800: #095c37;
  /* Nova | Web — Global Nav link hover (Figma node 66718:26920) */
  --colors-green-900: #084c2e;
  --colors-green-900-alpha-10: rgba(8, 76, 46, 0.1);

  /* ============================================
      COLORS - Green gradient button (Nova | Web – Figma)
      ============================================ */
  /* From Figma node 66694:47854 – base gradient rgba(61,113,80)→rgba(37,72,50), highlight rgba(175,221,192) */
  --colors-green-gradient-start: #3d7150;
  --colors-green-gradient-end: #254832;
  --colors-green-gradient-highlight: #afddc0;
  --colors-green-gradient-start-hover: #4d8160;
  --colors-green-gradient-end-hover: #2d5840;
  --colors-green-gradient-start-disabled: #6b8a6f;
  --colors-green-gradient-end-disabled: #4a5c4d;
  --colors-green-gradient-text-disabled: var(--colors-alpha-white-70);
  --colors-green-gradient-border-disabled: var(--colors-alpha-white-25);

  /* ============================================
      COLORS - Yellow/Amber (Warning)
      ============================================ */
  --colors-yellow-50: #fffbeb;
  --colors-yellow-300: #fcd34d;
  --colors-yellow-600: #d97706;
  --colors-yellow-700: #b45309;

  /* ============================================
      SPACING
      ============================================ */
  --spacing-none: 0;
  --spacing-xxs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.375rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 0.75rem;
  --spacing-xl: 1rem;
  --spacing-xxl: 1.125rem;
  --spacing-2xl: 1.25rem;
  --spacing-3xl: 1.5rem;
  --spacing-4xl: 2rem;
  --spacing-5xl: 2.5rem;
  --spacing-6xl: 3rem;
  --spacing-7xl: 4rem;

  /* ============================================
      CONTENT BLOCK (Nova / Figma)
  ============================================ */
  --content-block-padding-x-desktop: 7rem;   /* 112px - horizontal padding desktop */
  --content-block-gap-desktop: 4.5rem;       /* 72px - gap between image and content desktop */

  /* FAQ block (Nova Web — FAQ Block Variants; aligns with content-block frame + text styles) */
  --faq-surface-background: transparent;
  --faq-padding-mobile: var(--spacing-3xl); /* 24px — inset; matches content-block mobile inner */
  --faq-padding-desktop-y: var(--spacing-7xl); /* 64px — vertical inset desktop */
  --faq-padding-desktop-x: var(--content-block-padding-x-desktop);
  --faq-gap-columns-desktop: var(--content-block-gap-desktop); /* 72px — text column ↔ image */
  --faq-gap-stacked: var(--spacing-3xl); /* 24px — mobile stack gap image ↔ copy */
  --faq-gap-title-accordion: var(--spacing-6xl); /* 48px — “FAQs” heading → first accordion row */
  --faq-accordion-title-padding-y-mobile: var(--spacing-4xl); /* 32px — row padding mobile */
  --faq-accordion-title-padding-y-desktop: var(--spacing-5xl); /* 40px — row padding desktop */
  --faq-accordion-icon-slot-width: 3.125rem; /* 50px — +/- icon column (Figma) */
  --faq-accordion-content-offset-y-mobile: var(--faq-accordion-title-padding-y-mobile);
  --faq-accordion-content-offset-y-desktop: var(--faq-accordion-title-padding-y-desktop);
  --faq-accordion-content-padding-top: var(--spacing-sm);
  --faq-accordion-content-padding-bottom: var(--spacing-4xl);

  /* ============================================
      BORDER RADIUS
      ============================================ */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.125rem;
  --radius-3xl: 1.25rem;
  --radius-4xl: 1.5rem;
  --radius-5xl: 2rem;
  --radius-xlg: 1.5rem; /* Legacy - use radius-4xl instead */
  --radius-full: 9999px;

  /* ============================================
      TYPOGRAPHY - Font Families
      ============================================ */
  --font-family-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-display:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Monaco", "Courier New", monospace;

  /* ============================================
      TYPOGRAPHY - Font Sizes
      ============================================ */
  --font-size-text-xs: 0.75rem;
  --font-size-text-sm: 0.875rem;
  --font-size-text-md: 1rem;
  --font-size-text-lg: 1.125rem;
  --font-size-text-xl: 1.25rem;

  /* ============================================
      TYPOGRAPHY - Display Font Sizes
      ============================================ */
  --font-size-display-2xs: 1.75rem;
  --font-size-display-xs: 2rem;
  --font-size-display-sm: 2.25rem;
  --font-size-display-md: 2.5rem;
  --font-size-display-lg: 3rem;
  --font-size-display-xl: 3.75rem; /* 60px - Nova display xl */
  --font-size-display-30: 1.875rem; /* 30px - Figma display sm (e.g. page header XS) */

  /* ============================================
      TYPOGRAPHY - Line Heights
      ============================================ */
  --line-height-text-xs: 1rem;
  --line-height-text-sm: 1.25rem;
  --line-height-text-md: 1.5rem;
  --line-height-text-lg: 1.75rem;
  --line-height-text-xl: 1.875rem; /* 30px - Nova text xl */

  /* ============================================
      TYPOGRAPHY - Display Line Heights
      ============================================ */
  --line-height-display-2xs: 2.125rem;
  --line-height-display-xs: 2.375rem;
  --line-height-display-sm: 2.75rem;
  --line-height-display-md: 3rem;
  --line-height-display-lg: 3.5rem;
  --line-height-display-xl: 4.5rem; /* 72px - Nova display xl */
  --line-height-display-30: 2.375rem; /* 38px - Figma display sm */

  /* ============================================
      TYPOGRAPHY - Font Weights
      ============================================ */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-medium-plus: 550;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============================================
      TYPOGRAPHY - Letter Spacing
      ============================================ */
  --letter-spacing-text-xs: -0.03125rem; /* -0.5px - Nova */
  --letter-spacing-text-sm: -0.004375rem;
  --letter-spacing-text-md: -0.005rem;
  --letter-spacing-text-lg: -0.005rem;
  --letter-spacing-text-xl: 0;

  /* ============================================
      TYPOGRAPHY - Display Letter Spacing
      ============================================ */
  --letter-spacing-display-2xs: -0.03125rem; /* -0.5px - content block title and display 2xs */
  --letter-spacing-display-xs: -0.025rem; /* -0.4px */
  --letter-spacing-display-sm: -0.028125rem; /* -0.45px */
  --letter-spacing-display-md: -0.03125rem; /* -0.5px */
  --letter-spacing-display-lg: -0.0625rem; /* -1px - Nova display lg */
  --letter-spacing-display-xl: -0.075rem; /* -1.2px - Nova display xl */
  --letter-spacing-display-30: -0.0375rem; /* -0.6px - Figma display sm */

  /* ============================================
      BUTTON SIZES - Small (sm)
      ============================================ */
  --button-sm-height: 2.25rem;
  --button-sm-padding-x: 0.75rem;
  --button-sm-padding-y: 0.5rem;
  --button-sm-icon-size: 1.25rem;
  --button-sm-font-size: var(--font-size-text-sm);
  --button-sm-line-height: var(--line-height-text-sm);
  --button-sm-letter-spacing: var(--letter-spacing-text-sm);

  /* ============================================
      BUTTON SIZES - Medium (md)
      ============================================ */
  --button-md-height: 2.5rem;
  --button-md-padding-x: 0.875rem;
  --button-md-padding-y: 0.625rem;
  --button-md-icon-size: 1.25rem;
  --button-md-font-size: var(--font-size-text-sm);
  --button-md-line-height: var(--line-height-text-sm);
  --button-md-letter-spacing: var(--letter-spacing-text-sm);

  /* ============================================
      BUTTON SIZES - Large (lg)
      ============================================ */
  --button-lg-height: 2.75rem;
  --button-lg-padding-x: 1rem;
  --button-lg-padding-y: 0.625rem;
  --button-lg-icon-size: 1.25rem;
  --button-lg-font-size: var(--font-size-text-md);
  --button-lg-line-height: var(--line-height-text-md);
  --button-lg-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      BUTTON SIZES - Extra Large (xl)
      ============================================ */
  --button-xl-height: 3.25rem;
  --button-xl-padding-x: 1.125rem;
  --button-xl-padding-y: 0.75rem;
  --button-xl-icon-size: 1.25rem;
  --button-xl-font-size: var(--font-size-text-md);
  --button-xl-line-height: var(--line-height-text-md);
  --button-xl-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      SEMANTIC COLORS - Interactive States
      ============================================ */
  --color-interactive-default: var(--colors-blue-500);
  --color-interactive-hover: var(--colors-blue-600);
  --color-interactive-active: var(--colors-blue-700);
  --color-interactive-subtle: var(--colors-blue-100);
  --color-interactive-disabled: var(--colors-gray-200);

  /* ============================================
      SEMANTIC COLORS - Text
      ============================================ */
  --color-text-primary: var(--colors-gray-900);
  --color-text-secondary: var(--colors-gray-800);
  --color-text-tertiary: var(--colors-gray-700);
  --color-text-disabled: var(--colors-gray-500);
  --color-text-on-interactive: #ffffff;
  --color-text-link: var(--colors-gray-800);

  /* ============================================
      SEMANTIC COLORS - Borders
      ============================================ */
  --color-border-default: var(--colors-gray-border);
  --color-border-subtle: var(--colors-gray-200);
  --color-border-strong: var(--colors-gray-700);
  --color-border-interactive: var(--color-interactive-default);
  --color-border-disabled: var(--colors-disabled-border);

  /* ============================================
      SEMANTIC COLORS - Backgrounds
      ============================================ */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--colors-gray-100);
  --color-bg-disabled: var(--colors-gray-100);
  --color-bg-interactive-subtle: var(--colors-blue-50);
  --gradient-bg-light: linear-gradient(172deg, #f3f4f6 1.74%, #e3e3e8 110.94%);

  /* ============================================
      SEMANTIC COLORS - Status (Error)
      ============================================ */
  --color-status-error-text: var(--colors-red-700);
  --color-status-error-bg: var(--colors-red-300);
  --color-status-error-border: var(--colors-red-50);

  /* ============================================
      SEMANTIC COLORS - Status (Success)
      ============================================ */
  --color-status-success-text: var(--colors-green-700);
  --color-status-success-bg: var(--colors-green-50);
  --color-status-success-border: var(--colors-green-600);

  /* ============================================
      SEMANTIC COLORS - Status (Warning)
      ============================================ */
  --color-status-warning-text: var(--colors-yellow-700);
  --color-status-warning-bg: var(--colors-yellow-50);
  --color-status-warning-border: var(--colors-yellow-600);

  /* ============================================
      TRANSITIONS
      ============================================ */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ============================================
      AVATAR TOKENS (Nova | Design System - Foundation)
      ============================================ */
  --avatar-size-xs: 1.5rem;   /* 24px */
  --avatar-size-sm: 2rem;      /* 32px */
  --avatar-size-md: 2.5rem;    /* 40px */
  --avatar-size-lg: 3rem;      /* 48px */
  --avatar-size-xl: 3.5rem;    /* 56px */
  --avatar-size-2xl: 4rem;    /* 64px */
  --avatar-bg-default: var(--colors-gray-100);
  --avatar-border-color: var(--colors-alpha-white-90);
  --avatar-text-color: var(--colors-gray-700);
  --avatar-status-indicator-border: var(--color-bg-primary);
  --avatar-shadow-light: 0 4px 18px 0 var(--colors-alpha-black-06);
  --avatar-bg-dark: var(--colors-gray-800);
  --avatar-bg-dark-gradient: linear-gradient(172deg, rgb(76, 74, 74) 6.23%, rgb(0, 0, 0) 103.28%);
  --avatar-border-color-dark: var(--colors-alpha-white-30);
  --avatar-border-width-dark: 2px;
  --avatar-text-color-dark: var(--colors-alpha-white-90);
  --avatar-icon-color-dark: var(--colors-alpha-white-80);
  --avatar-icon-size-xs: 1rem;    /* 16px */
  --avatar-icon-size-sm: 1.25rem; /* 20px */
  --avatar-icon-size-md: 1.5rem;  /* 24px */
  --avatar-icon-size-lg: 1.75rem;  /* 28px */
  --avatar-icon-size-xl: 2rem;     /* 32px */
  --avatar-icon-size-2xl: 2rem;    /* 32px */

  /* ============================================
      MODAL TOKENS
      ============================================ */
  --modal-bg: var(--colors-gray-100);
  --modal-border-radius: var(--radius-5xl);
  --modal-max-width: 400px;
  --modal-shadow:
    0 1.25rem 1.5625rem -5px rgba(0, 0, 0, 0.1), 0 0.625rem 0.625rem -5px rgba(0, 0, 0, 0.04);
  --modal-backdrop-color: rgba(0, 0, 0, 0.4);
  --modal-backdrop-blur: 1rem;
  --modal-close-button-size: 2.75rem;
  --modal-close-button-color: var(--colors-gray-800);
  --modal-close-button-hover-bg: rgba(0, 0, 0, 0.05);
  --modal-close-button-focus-outline: 2px solid var(--colors-blue-500);
  --modal-icon-container-bg: var(--colors-blue-100);
  --modal-icon-container-radius: var(--radius-xl); /* 1rem per Figma */
  --modal-icon-color: var(--colors-blue-500);
  --modal-animation-duration: 250ms;
  /* Modal title typography - matches Figma display-xs specs */
  --modal-title-font-size: 1.5rem;
  --modal-title-line-height: 2rem;
  --modal-title-letter-spacing: 0;

  /* ============================================
      PAGE HEADER (layout / color only; typography uses display tokens above)
      ============================================ */
  --page-header-gap: var(--spacing-4xl);
  --page-header-row-gap: var(--spacing-xl);
  --page-header-actions-gap: var(--spacing-md);
  --page-header-title-color: var(--colors-primary-default);
  --page-header-title-font-weight: var(--font-weight-medium);
  --page-header-divider-color: var(--colors-gray-300);
  --page-header-divider-height: 1px;

  /* ============================================
      CARD (shared elevation / hover - Nova | Web)
      Used by featured card and other card components.
      ============================================ */
  --card-shadow-default: 0 1px 4px rgba(0, 0, 0, 0.02), 0 1px 2px -1px rgba(10, 13, 18, 0.06);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(10, 13, 18, 0.08);

  /* ============================================
      HERO CARD (Nova | Web)
      ============================================ */
  --hero-card-border-width: 1px;
  --hero-card-border-light: var(--color-bg-primary);
  /* Dark variant: thin border visible on dark backgrounds (Figma Outline style); use light border. */
  --hero-card-border-dark: rgba(255, 255, 255, 0.25);
  --hero-card-radius: var(--radius-5xl);
  /* Blur at bottom-left text area (frosted glass) */
  --hero-card-image-blur: 15px;
  --hero-card-gradient-overlay: linear-gradient(
      191.27deg,
      rgba(76, 137, 134, 0.05) 68.49%,
      rgba(20, 38, 37, 0.2) 92.7%
    ),
    linear-gradient(
      187.64deg,
      rgba(0, 0, 0, 0) 48.84%,
      rgba(0, 0, 0, 0.5) 83.08%,
      rgba(0, 0, 0, 0.7) 106.05%
    );
  --hero-card-sm-width: 24rem;
  --hero-card-sm-height: 13.5rem;
  --hero-card-md-width: 24rem;
  --hero-card-md-height: 16.5rem;
  --hero-card-lg-width: 24rem;
  --hero-card-lg-height: 20rem;
  --hero-card-xl-width: 63rem;
  --hero-card-xl-height: 31.5rem;
  --hero-card-xl-min-width: 52.5rem;
  --hero-card-xl-min-height: 26.25rem;
  --hero-card-icon-container-sm-width: 5rem;
  --hero-card-icon-container-sm-height: 3.75rem;
  --hero-card-icon-container-xl-width: 7.5rem;
  --hero-card-icon-container-xl-height: 5.625rem;
  --hero-card-action-size-sm: 2.5rem;
  --hero-card-action-size-xl: 3.25rem;
  /* Text on image overlay — Nova Web hero cards (Figma: utility-gray-50, utility-gray-200) */
  --hero-card-text-eyebrow: var(--colors-gray-50);
  --hero-card-text-title: var(--colors-gray-50);
  --hero-card-text-subtitle: var(--colors-gray-200);
  --hero-card-text-description: var(--colors-gray-200);
  /* XL subtitle: Display sm/Medium — Nova | Web Hero Cards (Figma: Hero Cards, xl) */
  --hero-card-xl-subtitle-font-size: var(--font-size-display-sm);
  --hero-card-xl-subtitle-line-height: var(--line-height-display-sm);
  --hero-card-xl-subtitle-letter-spacing: var(--letter-spacing-display-sm);
  /* XL description: Text xl/Regular */
  --hero-card-xl-description-font-size: var(--font-size-text-xl);
  --hero-card-xl-description-line-height: var(--line-height-text-xl);
  --hero-card-xl-description-letter-spacing: var(--letter-spacing-text-xl, 0);

  /* ============================================
      FEATURED CARD (Nova | Web)
      ============================================ */
  --featured-card-width: 24rem;
  --featured-card-height: 24.125rem;
  --featured-card-min-width: 20rem;
  --featured-card-min-height: 20rem;
  --featured-card-radius: var(--radius-5xl);
  --featured-card-border-width: 1.6px;
  /* Fixed image band — Nova | Web Featured Cards (Figma: QQ7oqsQdNUUsW88EqJHWAB, node 65655:30703). Tune to match Dev Mode if needed. */
  --featured-card-media-height: 12rem;
  --featured-card-store-logo-width: 5rem;
  --featured-card-store-logo-height: 3.75rem;
  --featured-card-action-size: 2.5rem;
  /* Typography — Nova | Web Featured Cards (Figma: Featured Cards, node 65655:30703) */
  --featured-card-text-eyebrow-font-size: var(--font-size-text-md);
  --featured-card-text-eyebrow-line-height: var(--line-height-text-md);
  --featured-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
  --featured-card-text-title-font-size: var(--font-size-text-xl);
  --featured-card-text-title-line-height: var(--line-height-text-xl);
  --featured-card-text-title-letter-spacing: var(--letter-spacing-text-xl);
  --featured-card-text-subtitle-font-size: var(--font-size-text-md);
  --featured-card-text-subtitle-line-height: var(--line-height-text-md);
  --featured-card-text-subtitle-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      CONTENT CARD (Nova | Web)
      Figma: QQ7oqsQdNUUsW88EqJHWAB — Content Cards, node 65677:6873
      ============================================ */
  --content-card-width: 24rem;
  --content-card-min-width: 20rem;
  --content-card-min-height: 20rem;
  --content-card-radius: var(--radius-5xl);
  --content-card-border-width: 1.6px;
  /* Fixed image band — Nova | Web content cards (Figma: 236px) */
  --content-card-media-height: 14.75rem; /* 236px @ 16px root */
  --content-card-description-line-clamp: 4;
  --content-card-action-size: 2.5rem;
  --content-card-text-eyebrow-font-size: var(--font-size-text-md);
  --content-card-text-eyebrow-line-height: var(--line-height-text-md);
  --content-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
  --content-card-text-title-font-size: var(--font-size-display-2xs);
  --content-card-text-title-line-height: var(--line-height-display-xs);
  --content-card-text-title-letter-spacing: var(--letter-spacing-display-2xs);
  --content-card-text-description-font-size: var(--font-size-text-md);
  --content-card-text-description-line-height: var(--line-height-text-md);
  --content-card-text-description-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      OFFER CARD (Nova | Web)
      ============================================ */
  --offer-card-radius: var(--radius-5xl);
  --offer-card-border-width: 1.6px;
  --offer-card-store-logo-width: 5rem;
  --offer-card-store-logo-height: 3.75rem;
  --offer-card-action-size: 2.5rem;
  /* Typography — Nova | Web Offer Cards (Figma: Offer Cards, node 65655:31211) */
  --offer-card-text-eyebrow-font-size: var(--font-size-text-sm);
  --offer-card-text-eyebrow-line-height: var(--line-height-text-sm);
  --offer-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-sm);
  --offer-card-text-eyebrow-sm-font-size: var(--font-size-text-md);
  --offer-card-text-eyebrow-sm-line-height: var(--line-height-text-md);
  --offer-card-text-eyebrow-sm-letter-spacing: var(--letter-spacing-text-md);
  --offer-card-text-title-font-size: var(--font-size-text-lg);
  --offer-card-text-title-line-height: var(--line-height-text-lg);
  --offer-card-text-title-letter-spacing: var(--letter-spacing-text-lg);
  --offer-card-text-title-lg-font-size: var(--font-size-text-xl);
  --offer-card-text-title-lg-line-height: var(--line-height-text-xl);
  --offer-card-text-title-lg-letter-spacing: var(--letter-spacing-text-xl);
  --offer-card-text-subtitle-font-size: var(--font-size-text-sm);
  --offer-card-text-subtitle-line-height: var(--line-height-text-sm);
  --offer-card-text-subtitle-letter-spacing: var(--letter-spacing-text-sm);
  --offer-card-text-subtitle-lg-font-size: var(--font-size-text-md);
  --offer-card-text-subtitle-lg-line-height: var(--line-height-text-md);
  --offer-card-text-subtitle-lg-letter-spacing: var(--letter-spacing-text-md);
  /* SM */
  --offer-card-sm-width: 24rem;
  --offer-card-sm-min-width: 20rem;
  --offer-card-sm-max-width: 25rem;
  --offer-card-sm-min-height: 7.5rem;
  --offer-card-sm-max-height: 10rem;
  /* MD */
  --offer-card-md-width: 24rem;
  --offer-card-md-min-width: 17.5rem;
  --offer-card-md-height: 13.5rem;
  --offer-card-md-min-height: 13.125rem;
  --offer-card-md-max-height: 20rem;
  /* LG */
  --offer-card-lg-width: 24rem;
  --offer-card-lg-min-width: 18.375rem;
  --offer-card-lg-height: 15.75rem;
  --offer-card-lg-min-height: 15.75rem;

  /* ============================================
      COMMUNITY CARD (Nova | Web)
      ============================================ */
  --community-card-radius: var(--radius-5xl);
  --community-card-border-width: 1.6px;
  --community-card-icon-wrap-size: 2.25rem;
  --community-card-icon-size: 1.25rem;
  --community-card-width: 24rem;
  --community-card-min-width: 17.5rem;
  --community-card-min-height: 13.125rem;

  /* ============================================
      RIBBON BANNER (Nova | Web – Figma 67321:8416)
      ============================================ */
  --ribbon-banner-content-max-width: 45rem; /* 720px */
  --ribbon-banner-text-column-max-width: 40.25rem; /* 644px */
  --ribbon-banner-padding-x: var(--spacing-2xl); /* 20px */
  --ribbon-banner-gap-section: var(--spacing-lg); /* 12px icon+text block ↔ chevron */
  --ribbon-banner-gap-icon-text: var(--spacing-xxs); /* 2px between icon and label */
  --ribbon-banner-padding-y-lg: var(--spacing-md); /* 8px vertical – size lg */
  --ribbon-banner-padding-y-md-sm: var(--spacing-xs); /* 4px vertical – size md, sm */
  --ribbon-banner-icon-wrap-radius: var(--radius-md);
  --ribbon-banner-icon-padding-lg-md: var(--spacing-md); /* 8px */
  --ribbon-banner-icon-padding-sm: 0.416667rem; /* ~6.667px */
  --ribbon-banner-icon-size-lg-md: 1.25rem; /* 20px */
  --ribbon-banner-icon-size-sm: 1.041667rem; /* ~16.667px */
  --ribbon-banner-action-padding-lg-md: var(--spacing-md);
  --ribbon-banner-action-padding-sm: 0.416667rem;
  --ribbon-banner-white-elevation: var(--card-shadow-default);
  --ribbon-banner-green-gradient-base: radial-gradient(
    120% 200% at 50% 0%,
    var(--colors-green-gradient-start) 0%,
    var(--colors-green-gradient-end) 100%
  );
  --ribbon-banner-green-gradient-highlight: radial-gradient(
    90% 140% at 50% 110%,
    var(--colors-green-gradient-highlight) 0%,
    transparent 65%
  );
  /* Content row height with leading icon (padding + icon); same min-height when icon omitted */
  --ribbon-banner-content-row-min-height-lg-md: calc(
    var(--ribbon-banner-icon-padding-lg-md) * 2 + var(--ribbon-banner-icon-size-lg-md)
  );
  --ribbon-banner-content-row-min-height-sm: calc(
    var(--ribbon-banner-icon-padding-sm) * 2 + var(--ribbon-banner-icon-size-sm)
  );
}