/* Generated from design-kit/tokens/tokens.json. Do not hand-edit values;
   change the source token and regenerate this file instead. */

:root {
  /* color.text */
  --color-text-primary: #122238;
  --color-text-secondary: #49586C;
  --color-text-tertiary: #7D8899;
  --color-text-muted: #6B7A90;
  --color-text-placeholder: #9AA5B5;
  --color-text-label: #2E4466;
  --color-text-on-dark: #FFFFFF;

  /* color.brand */
  --color-brand-ai: #376FFF;
  --color-brand-navy: #0C2137;
  --color-brand-navy-popup: #102438;
  --color-brand-segment-active: #0E1D30;
  --color-brand-camera: #F04848;
  --color-brand-premium-title: #FFD84D;
  --color-brand-crown: #FFE323;

  /* color.surface */
  --color-surface-background: #FFFFFF;
  --color-surface-input: #F6F6F9;
  --color-surface-icon-tile: #F4F6FA;
  --color-surface-photo: #E3E1E2;
  --color-surface-ai-card: #F0E9FC;

  /* color.border */
  --color-border-default: #DCE2EA;
  --color-border-input: #C9D3E0;
  --color-border-chip: #E3E7EE;
  --color-border-divider: #EEF1F5;

  /* color.note */
  --color-note-yellow: #FEF1B3;
  --color-note-pink: #FED6EC;
  --color-note-green: #DAF5E9;
  --color-note-blue: #D5ECFD;

  /* color.tile */
  --color-tile-yellow: #FEF6B5;
  --color-tile-pink: #FEE3F2;
  --color-tile-blue: #DAEBFD;
  --color-tile-green: #E4FDE0;

  /* color.stat */
  --color-stat-blue-bg: #E2F0FD;
  --color-stat-blue: #2F7BF5;
  --color-stat-pink-bg: #FEE8F5;
  --color-stat-pink: #E8338F;
  --color-stat-green-bg: #E4FEE2;
  --color-stat-green: #1DAA3B;
  --color-stat-yellow-bg: #FEF3BF;
  --color-stat-yellow: #966407;
  --color-stat-purple: #8B3FE0;
  --color-stat-purple-title: #7A35D6;
  --color-stat-purple-text: #6E6390;

  /* color.status */
  --color-status-success: #08A170;
  --color-status-success-track: #DEE2E6;
  --color-status-group-bg: #DAF5E9;
  --color-status-group-icon: #1B9258;
  --color-status-group-text: #1B6E46;
  --color-status-chip-active-bg: #D6EFE7;
  --color-status-warning-bg: #FEF1DD;
  --color-status-warning-icon: #E8742A;
  --color-status-warning-text: #D9621E;
  --color-status-warning-inline: #E8862A;
  --color-status-spinner: #1B75FD;
  --color-status-spinner-track: #E6EEFC;

  /* color.export */
  --color-export-pdf-bg: #FEE5EC;
  --color-export-pdf: #E53935;
  --color-export-word-bg: #DDEEFE;
  --color-export-word: #1E63E9;
  --color-export-xls-bg: #E2FCDE;
  --color-export-xls: #14923B;

  /* font.family */
  --font-family-ui: 'Inter', sans-serif;
  --font-family-ui-display: 'Inter Display', sans-serif;
  --font-family-handwriting: 'Patrick Hand', cursive;

  /* typography (fontFamily / weight / size[rem] / lineHeight / letterSpacing[em]) */
  --typography-logo-family: var(--font-family-ui-display);
  --typography-logo-weight: 800;
  --typography-logo-style: italic;
  --typography-logo-size: 1.9375rem; /* 31px */
  --typography-logo-letter-spacing: -0.019em; /* -0.3px / 31px */

  --typography-screen-title-large-family: var(--font-family-ui-display);
  --typography-screen-title-large-weight: 800;
  --typography-screen-title-large-size: 1.75rem; /* 28px */

  --typography-screen-title-family: var(--font-family-ui-display);
  --typography-screen-title-weight: 700;
  --typography-screen-title-size: 1.25rem; /* 20px */

  --typography-hero-title-family: var(--font-family-ui-display);
  --typography-hero-title-weight: 700;
  --typography-hero-title-size: 1.5rem; /* 24px */

  --typography-section-title-family: var(--font-family-ui);
  --typography-section-title-weight: 700;
  --typography-section-title-size: 1.0625rem; /* 17px */

  --typography-tagline-family: var(--font-family-ui);
  --typography-tagline-weight: 400;
  --typography-tagline-size: 1.125rem; /* 18px */
  --typography-tagline-line-height: 1.3;

  --typography-body-family: var(--font-family-ui);
  --typography-body-weight: 400;
  --typography-body-size: 0.9375rem; /* 15px */
  --typography-body-line-height: 1.45;

  --typography-body-strong-family: var(--font-family-ui);
  --typography-body-strong-weight: 600;
  --typography-body-strong-size: 1.0625rem; /* 17px */

  --typography-button-family: var(--font-family-ui);
  --typography-button-weight: 600;
  --typography-button-size: 1rem; /* 16px */

  --typography-button-small-family: var(--font-family-ui);
  --typography-button-small-weight: 600;
  --typography-button-small-size: 0.9375rem; /* 15px */

  --typography-secondary-family: var(--font-family-ui);
  --typography-secondary-weight: 400;
  --typography-secondary-size: 0.8125rem; /* 13px */

  --typography-chip-family: var(--font-family-ui);
  --typography-chip-weight: 500;
  --typography-chip-size: 0.8125rem; /* 13px */

  --typography-tag-family: var(--font-family-ui);
  --typography-tag-weight: 700;
  --typography-tag-size: 0.6875rem; /* 11px */
  --typography-tag-letter-spacing: 0.018em; /* 0.2px / 11px */
  --typography-tag-transform: uppercase;

  --typography-tab-label-family: var(--font-family-ui);
  --typography-tab-label-weight: 500;
  --typography-tab-label-size: 0.6875rem; /* 11px */

  --typography-stat-number-family: var(--font-family-ui);
  --typography-stat-number-weight: 600;
  --typography-stat-number-size: 1.875rem; /* 30px */

  --typography-note-text-family: var(--font-family-handwriting);
  --typography-note-text-weight: 400;
  --typography-note-text-size: 1.25rem; /* 20px */
  --typography-note-text-line-height: 1.12;

  /* radius */
  --radius-xs: 0.375rem;   /* 6px */
  --radius-sm: 0.625rem;   /* 10px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.25rem;    /* 20px */
  --radius-sheet: 1.5rem;  /* 24px */
  --radius-full: 999px;

  /* spacing */
  --spacing-xxs: 0.25rem;         /* 4px */
  --spacing-xs: 0.375rem;         /* 6px */
  --spacing-sm: 0.625rem;         /* 10px */
  --spacing-md: 0.75rem;          /* 12px */
  --spacing-lg: 0.875rem;         /* 14px */
  --spacing-screen-padding: 1rem; /* 16px */
  --spacing-xl: 1.5rem;           /* 24px */

  /* size */
  --size-touch-min: 2.75rem;      /* 44px */
  --size-button: 2.875rem;        /* 46px */
  --size-button-primary: 3.25rem; /* 52px */
  --size-list-row: 2.875rem;      /* 46px */
  --size-project-row: 6rem;       /* 96px */
  --size-home-tile: 7.5rem;       /* 120px */
  --size-note-card: 8.375rem;     /* 134px */
  --size-stat-card: 6.125rem;     /* 98px */
  --size-tab-bar: 5.25rem;        /* 84px */
  --size-camera-fab: 3.5rem;      /* 56px */
  --size-shutter: 5.25rem;        /* 84px */

  /* shadow (offsetX offsetY blur color) */
  --shadow-row: 0 1px 4px #10243812;
  --shadow-card: 0 1px 5px #10243814;
  --shadow-floating: 0 2px 10px #1024381F;
  --shadow-sheet: 0 -10px 30px #10243824;
  --shadow-camera-fab: 0 6px 14px #F0484859;

  /* ---------------------------------------------------------------------
     site-* : web-only, not from tokens.json. The marketing landing page
     has layout dimensions (page container, hero icons, illustration and
     screen-card widths, focus-ring width) with no mobile-app equivalent
     in design-kit/tokens/tokens.json. Keep these here instead of literal
     values in base.css/components.css so nothing is hard-coded. */
  --site-container-max-width: 72rem;
  --site-subtitle-max-width: 40rem;
  --site-hero-tagline-max-width: 34rem;
  --site-hero-subhead-max-width: 36rem;
  --site-footer-tagline-max-width: 28rem;
  --site-icon-wordmark: 1.75rem;
  --site-icon-hero-mark: 3rem;
  --site-footer-logo-width: 10rem;
  --site-screen-card-width: 11.5rem;
  --site-illustration-width: 16rem;
  --site-icon-badge: 1.25rem;
  --site-dot-size: 0.4rem;
  --site-focus-outline-width: 3px;
  --site-skip-link-hidden-offset: -3rem;

  /* Landing redesign ("la pizarra viva"): board, post-it and phone sizes,
     plus the motion scale. Colors still come only from the tokens above;
     tints are color-mix() of those tokens, never new hex values. */
  --site-hero-title-size: clamp(2.25rem, 4.4vw + 0.5rem, 3.5rem);
  --site-section-title-size: clamp(1.75rem, 2.6vw + 0.75rem, 2.625rem);
  --site-lead-size: clamp(1rem, 0.6vw + 0.85rem, 1.1875rem);
  --site-board-height: clamp(23rem, 42vw, 33rem);
  --site-postit-size: clamp(5.75rem, 9.6vw, 7.75rem);
  --site-postit-mini-size: clamp(6rem, 10vw, 7.5rem);
  --site-step-note-size: 9.5rem;
  --site-phone-width: 17.5rem;
  --site-phone-bezel: 0.625rem;
  --site-gate-card-width: 21rem;
  --site-insight-pop-width: 15.75rem;
  --site-scanline-height: 0.375rem;
  --site-corner-size: 2.25rem;
  --site-corner-stroke: 0.25rem;
  --site-header-height: 4.5rem;
  --site-icon: 1.5rem;
  --site-icon-sm: 1.125rem;
  --site-icon-tile: 2.375rem;

  --site-shadow-postit:
    0 1px 1px color-mix(in srgb, var(--color-brand-navy) 8%, transparent),
    0 12px 22px -10px color-mix(in srgb, var(--color-brand-navy) 35%, transparent);
  --site-shadow-postit-lifted:
    0 2px 2px color-mix(in srgb, var(--color-brand-navy) 8%, transparent),
    0 26px 36px -14px color-mix(in srgb, var(--color-brand-navy) 40%, transparent);
  --site-ai-glow: color-mix(in srgb, var(--color-brand-ai) 22%, transparent);

  --site-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --site-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --site-motion-fast: 0.2s;
  --site-motion-base: 0.6s;
  --site-motion-slow: 0.9s;
  --site-scan-cycle: 9s;
}