:root {

  /* ============================================
     NEUTRAL ANCHORS
     ============================================ */
  --pure-black:    #000000;
  --black:         #171717;
  --sterling:      #E2E0D7;
  --sterling-bg:   #F1F0EB;
  --white:         #FFFFFF;

  /* ============================================
     INK RAMP  ·  jerarquía de texto
     ============================================ */
  --ink-900: #171717;
  --ink-700: #3D3D3D;
  --ink-500: #616161;
  --ink-400: #888888;
  --ink-300: #CACACA;

  /* ============================================
     SURFACES & LINES
     ============================================ */
  --surface-2:   #FAF9F6;
  --surface-3:   #F1EFE9;
  --line:        #E4E2DC;
  --line-strong: #171717;
  --overlay: rgba(23,23,23,.42);

  /* ============================================
     BRAND SPECTRUM  ·  solo pantallas generales
     y MyBank. NUNCA en Plaude.
     ============================================ */
  --aubergine: #2E1A47;
  --magenta:   #B23B82;
  --red:       #E01225;
  --coral:     #EE4540;
  --orange:    #FB8500;
  --sfs-gradient: linear-gradient(135deg, #2E1A47 0%, #B23B82 35%, #E01225 65%, #EE4540 82%, #FB8500 100%);

  /* ============================================
     STATUS
     ============================================ */
  --success:     #95DC00;
  --success-ink: #4F7A00;
  --success-bg:  #EFF9D6;
  --warning:     #AE9B82;
  --warning-ink: #6E5C3F;
  --warning-bg:  #F2EEE6;
  --error:       #FF6232;
  --error-ink:   #C4371C;
  --error-bg:    #FFE8E0;
  --info:        #2E1A47;
  --info-ink:    #2E1A47;
  --info-bg:     #ECE7F3;

  /* ============================================
     BANCO  ·  MyBank hereda la identidad Sopra.
     Alias sobre Status Info / Aubergine.
     ============================================ */
  --bank:      #2E1A47;
  --bank-deep: #171717;
  --bank-tint: #ECE7F3;
  --bank-line: #D8D0E4;
  --bank-bg:   #F7F5FA;

  /* ============================================
     TIPOGRAFÍA
     Haffer Concrete es de pago. Inter es el
     fallback oficial documentado en el sistema.
     ============================================ */
  --font: 'Haffer Concrete', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ui-2xl: 28px; --ui-2xl-lh: 36px;
  --ui-xl: 22px; --ui-xl-lh: 28px;
  --ui-lg: 18px; --ui-lg-lh: 24px;
  --ui-md: 15px; --ui-md-lh: 22px;
  --ui-sm: 13px; --ui-sm-lh: 18px;
  --ui-xs: 11px; --ui-xs-lh: 16px;
  --mk-title-s: 40px; --mk-title-s-lh: 48px;
  --mk-title-xs: 24px; --mk-title-xs-lh: 32px;
  --mk-body-xl: 24px; --mk-body-xl-lh: 34px;
  --mk-body: 20px; --mk-body-lh: 30px;
  --mk-body-s: 16px; --mk-body-s-lh: 24px;
  --mk-caption: 14px; --mk-caption-lh: 20px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ============================================
     SPACING SCALE  ·  rejilla de 8pt
     ============================================ */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 120px;
  --s-10: 160px;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --r-none: 0;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-card-lg: 24px;
  --r-surface: 48px;
  --r-pill: 9999px;

  /* ============================================
     ELEVATION
     ============================================ */
  --el-flat: none;
  --el-1: 0 1px 2px rgba(23,23,23,.05);
  --el-2: 0 2px 8px rgba(23,23,23,.07);
  --el-3: 0 8px 24px rgba(23,23,23,.10);
  --el-ai-glow: 0 4px 20px rgba(178,59,130,.18);

  /* ============================================
     DISPOSITIVO  ·  iPhone 17
     ============================================ */
  --device-w: 390px;
  --device-h: 844px;
  --safe-top: 59px;
  --safe-bottom: 34px;
  --pad-content: 16px;   /* área de contenido: 370px */
  --pad-wide: 24px;      /* área de contenido: 354px */

  /* Medidas reutilizables requeridas por los componentes. */
  --island-w: 104px;
  --island-h: 26px;
  --indicator-w: 132px;
  --indicator-h: 5px;
  --icon-xs: 20px;
  --icon-sm: 24px;
  --icon-md: 40px;
  --icon-stroke: 2;
  --control-lg: 44px;
  --grabber-w: 38px;
  --grabber-h: 4px;
  --content-label-w: 42%;
  --opacity-disabled: .4;
  --opacity-pressed: .82;
  --transition-fast: 150ms ease;
  --app-transition-duration: 350ms;
  --app-transition-easing: cubic-bezier(0.32, 0.72, 0, 1);
  --app-transition-offset: var(--s-5);
  --app-transition-scale: .96;

  /* Pantallas de acceso y bienvenida del prototipo. */
  --ios-home-start: #586F96;
  --ios-home-middle: #7899B8;
  --ios-home-end: #A9C2CF;
  --ios-home-gradient: linear-gradient(145deg, var(--ios-home-start) 0%, var(--ios-home-middle) 48%, var(--ios-home-end) 100%);
  --ios-app-size: 60px;
  --ios-app-radius: 14px;
  --ios-app-mark-size: 36px;
  --ios-app-label-size: 12px;
  --ios-app-label-lh: 16px;
  --ios-app-shadow: 0 2px 8px rgba(23,23,23,.12);
  --ios-label-shadow: 0 1px 3px rgba(23,23,23,.45);
  --press-scale: .96;
  --header-icon-size: 20px;
  --header-close-size: 16px;
  --focus-ring: 2px;
  --modal-max-width: 342px;
  --layer-modal: 10;
  --exit-overlay: rgba(0,0,0,.45);
  --exit-overlay-inline-padding: 18px;
  --exit-modal-max-width: 356px;
  --exit-modal-padding: 22px;
  --exit-modal-gap: 20px;
  --exit-option-gap: 12px;
  --exit-option-height: 62px;

  /* Entrada del prototipo Sopra. */
  --line-hairline: 1px;
  --intro-pad: 20px;
  --intro-island-w: 125px;
  --intro-island-h: 38px;
  --intro-card-pad: 12px;
  --intro-card-gap: 12px;
  --intro-card-stack-gap: 10px;
  --intro-card-icon: 28px;
  --intro-card-glyph: 16px;

  /* ============================================
     PLAUDE · valores exactos del Figma
     Superficie neutra. Aparece en los tres
     prototipos, así que no lleva color de marca.
     ============================================ */
  --pl-bg:          #F5F4F2;
  --pl-card:        #FFFFFF;
  --pl-bubble:      #EBEAE7;
  --pl-composer-bg: #FBFAF9;
  --pl-line:        #E4E2DE;
  --pl-btn-dark:    #1C1B1A;
  --pl-btn-light:   #EFEEEB;
  --pl-ink:         #2C2C2C;
  --pl-ink-soft:    #6B6A67;
  --pl-ink-faint:   #9C9B97;
  --pl-verified:    #2F7D53;
  --pl-warn:        #B4551F;
  --pl-tint-ok:     #E8F1EB;
  --pl-tint-warn:   color-mix(in srgb, var(--pl-warn) 12%, var(--pl-card));
  --pl-on-dark:     #FFFFFF;

  /* Tipografía Plaude. */
  --pl-font: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --pl-fs-hero: 30px;
  --pl-fs-body: 16px;
  --pl-fs-card-title: 16px;
  --pl-fs-card-text: 14px;
  --pl-fs-chip: 14px;
  --pl-fs-status: 14px;
  --pl-fs-badge: 12px;
  --pl-lh-body: 1.5;

  /* Medidas Plaude indicadas en el Figma. */
  --pl-r-card: 16px;
  --pl-r-composer: 24px;
  --pl-r-bubble: 24px;
  --pl-r-btn: 14px;
  --pl-r-pill: 9999px;
  --pl-mic-size: 48px;
  --pl-header-control: 44px;
  --pl-message-max: 82%;
  --pl-cover-composer-radius: 28px;
  --pl-cover-composer-pad-block: 14px;
  --pl-cover-add-size: 36px;
  --pl-cover-chip-height: 36px;
  --pl-cover-mic-size: 44px;
  --pl-composer-action-icon: 16px;
  --pl-chat-header-height: 68px;
  --pl-chat-composer-height: 112px;
  --pl-chat-composer-pad-block: 14px;
  --pl-chat-scrollbar-width: 0px;
  --pl-search-chevron-size: 20px;
  --pl-payment-logo-height: 28px;
  --pl-payment-logo-slot: 48px;
  --viewport-height: 100vh;
  --pl-thinking-flower-size: 22px;
  --pl-thinking-offset: 8px;
  --pl-thinking-delay: 1400ms;
  --pl-thinking-reveal-duration: 300ms;
  --pl-thinking-spin-duration: 3s;
  --pl-agent-word-delay: 35ms;
  --pl-agent-paragraph-delay: 200ms;
  --pl-composer-character-delay: 28ms;
  --pl-composer-character-jitter: 10ms;
  --pl-conversation-anchor-inset: var(--s-3);
  --pl-progress-step-delay: 900ms;
  --pl-progress-block-delay: 1600ms;
  --pl-progress-warning-delay: 600ms;

  /* ============================================
     MYBANK · valores exactos del Figma
     ============================================ */
  --mb-primary:   #E01225;
  --mb-sheet-bg:  #FFFFFF;
  --mb-card:      var(--pl-btn-light);
  --mb-card-line: var(--pl-line);
  --mb-card-ink:  var(--pl-ink);
  --mb-check:     #2F7D53;
  --mb-faceid-spinner: #51C8F3;
  --mb-faceid-state-duration: 250ms;
  --mb-faceid-verification-duration: 1600ms;
  --mb-faceid-authenticated-duration: 1000ms;
  --mb-on-color:  #FFFFFF;
  --mb-overlay:   rgba(28,27,26,.42);
  --mb-sheet-transition-duration: 320ms;
  --mb-sheet-transition-easing: cubic-bezier(0.32, 0.72, 0, 1);

  /* Tipografía MyBank. */
  --mb-font: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --mb-fs-title: 21px;
  --mb-fs-body: 14px;
  --mb-fs-btn: 16px;
  --mb-fs-cancel: 14px;
  --mb-fs-section: 12px;
  --mb-fs-link: 12px;
  --mb-fs-card-t: 12px;

  /* Medidas MyBank indicadas en el Figma. */
  --mb-r-sheet: 24px;
  --mb-r-btn: 12px;
  --mb-r-card: 12px;
  --mb-nav-control: 40px;
  --mb-check-size: 72px;
  --mb-faceid-size: 100px;
  --mb-faceid-line: 2px;
  --mb-faceid-radius: 20px;
  --mb-app-bg: #E7E4DA;
  --mb-app-header-height: 52px;
  --mb-app-top-height: 96px;
  --mb-app-nav-height: 48px;
  --mb-app-header-bg: #151515;
  --mb-app-header-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mb-app-header-padding: 20px;
  --mb-app-status-padding: 22px;
  --mb-app-back-gap: 5px;
  --mb-app-back-icon-width: 12px;
  --mb-app-back-icon-height: 20px;
  --mb-app-brand-size: 17px;
  --mb-app-status-island-width: 76px;
  --mb-app-status-island-height: 28px;
  --mb-app-system-icons-width: 70px;
  --mb-app-system-icons-height: 18px;
  --mb-app-focus: #1434CB;
  --mb-app-transition: 120ms cubic-bezier(.2, 0, 0, 1);
  --mb-app-card-min-height: 490px;
  --mb-app-card-padding: 24px;
  --mb-bank-row-min-height: 72px;
  --mb-search-height: 48px;
  --mb-radio-size: 22px;
  --mb-status-dot-size: 8px;
  --mb-identity-delay: 1200ms;

  /* Composición de las pantallas de conexión MyBank. */
  --mb-sheet-max-height: 75%;
  --mb-sheet-standard-height: min(640px, 75%);
  --mb-sheet-pad: 20px;
  --mb-section-gap: 20px;
  --mb-content-gap: 16px;
  --mb-tight-gap: 8px;
  --mb-hero-gap: 24px;
  --mb-brand-logo: 32px;
  --mb-partner-logo: 40px;
  --mb-inline-icon: 24px;
  --mb-small-icon: 18px;
  --mb-check-icon: 40px;
  --mb-note-size: 12px;
  --mb-note-lh: 18px;
  --mb-permission-title: 14px;
  --mb-permission-description: 12px;
  --mb-permission-lh: 17px;
  --mb-connection-row-icon: 20px;
  --mb-sheet-layer: 2;
  --mb-backdrop-layer: 1;
}