:root{
/* ── Brand core (exact values from the Figma identity sheet) ── */
--otenti-navy:#170041;            /* Dark Navy · text & dark surfaces */
--otenti-deep-purple:#350096;     /* Deep Purple · brand anchor / gradient end */
--otenti-purple:#6900AB;          /* Purple Accent · midtone shift, primary action */
--otenti-magenta:#AE0A91;         /* Magenta · vibrancy step */
--otenti-pink:#F72078;            /* Hot Pink · focal glow */
--otenti-cyan:#42C1EB;            /* Cyan Utility · info & success */
--otenti-blue:#4086EA;            /* Blue Utility · secondary brand */
--otenti-light:#F8F9FC;           /* Pristine Light · UI base */
--otenti-secondary-text:#6B7280;  /* Secondary Text */

/* ── Extended palette in use across product screens ── */
--otenti-lavender:#F4EDFF;        /* tinted app background / instruction cards */
--otenti-cream:#FBFAF7;           /* mascot face, badge ring */
--otenti-plum:#3B1A6E;            /* body copy on tinted screens */
--otenti-green:#1FD187;           /* system toggle · on */
--otenti-ink-blue:#143375;        /* iOS incoming-call sheet */
--otenti-blue-bright:#238DFC;     /* caller avatar chip */
--otenti-white:#FFFFFF;
--otenti-black:#000000;

/* ── Neutrals ── */
--slate-900:#0F172A;
--slate-500:#64748B;
--slate-400:#94A3B8;
--slate-200:#E2E8F0;
--gray-700:#707070;
--gray-300:#E5E7EB;
--gray-250:#E6E2EE;
--gray-200:#D9D9D9;
--gray-400:#A4A2A2;

/* ── Alpha & tint values ── */
--otenti-purple-20:rgba(105,0,171,0.2);
--otenti-purple-10:rgba(105,0,171,0.1);
--otenti-pink-10:rgba(247,32,120,0.1);
--otenti-violet-10:rgba(122,43,216,0.1);
--otenti-navy-18:rgba(23,0,65,0.18);
--otenti-app-bg:rgba(244,237,255,0.1);

/* ── Gradients ── */
--otenti-gradient-brand:linear-gradient(90deg,#F72078 0%,#350096 100%); /* @kind color */
--otenti-gradient-mark:linear-gradient(180deg,#F72078 0%,#350096 100%); /* @kind color */
--otenti-gradient-mascot:linear-gradient(180deg,#350096 0%,#F72078 100%); /* @kind color */
--otenti-gradient-appicon:linear-gradient(130.548deg,#F72078 5.65%,#350096 89.11%); /* @kind color */
--otenti-gradient-badge:linear-gradient(130.603deg,#F72078 5.66%,#350096 89.11%); /* @kind color */
--otenti-bloom:radial-gradient(300px 300px at 50% 50%,rgba(247,32,120,0.3) 0%,rgba(23,0,65,0.3) 100%); /* @kind color */
--otenti-glow:radial-gradient(360px 360px at 50% 50%,rgba(122,43,216,0.1) 0%,rgba(122,43,216,0) 65%); /* @kind color */

/* ── Semantic aliases ── */
--text-strong:var(--otenti-navy);
--text-body:var(--otenti-plum);
--text-muted:var(--gray-700);
--text-meta:var(--slate-500);
--text-on-dark:var(--otenti-white);
--text-heading-doc:var(--slate-900);
--text-accent:var(--otenti-pink);
--text-link:var(--otenti-purple);

--surface-page:var(--otenti-app-bg);
--surface-card:var(--otenti-white);
--surface-tint:var(--otenti-lavender);
--surface-doc:var(--otenti-light);
--surface-dark:var(--otenti-navy);

--action-primary:var(--otenti-purple);
--action-primary-text:var(--otenti-white);
--action-secondary:var(--otenti-white);
--action-secondary-text:var(--otenti-purple);
--action-quiet:var(--otenti-purple-20);

--border-hairline:var(--slate-200);
--border-field:var(--gray-300);
--border-divider:var(--gray-200);

--status-verified:var(--otenti-cyan);
--status-on:var(--otenti-green);
--status-warning:var(--otenti-pink);
}

:root{
--font-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

/* weights actually used in the file */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-extrabold:800; /* @kind font */
--fw-black:900; /* @kind font */

/* Guidelines type scale (Figma "Type Scale" card) */
--fs-h1:56px;
--fs-h2:40px;
--fs-h3:28px;
--fs-body:16px;
--fs-caption:12px;
--fs-overline:11px;

/* Product-screen sizes, verbatim from the app frames */
--fs-hero:48px;         /* splash headline */
--fs-screen-title:28px; /* onboarding H1 */
--fs-badge:12px;
--fs-field:16px;
--fs-cta:15.5px;
--fs-cta-sm:14px;
--fs-helper:13.5px;
--fs-bubble:13.1px;
--fs-legal:11.5px;
--fs-status:13px;
--fs-step:14.5px;

/* line heights / tracking */
--lh-tight:100%; /* @kind font */
--lh-hero:1.1; /* @kind font */
--lh-title:30.8px;
--lh-bubble:18.27px;
--lh-legal:16.1px;
--lh-cta:26px;
--lh-row:21px;
--lh-body:1.5; /* @kind font */
--ls-hero:-1.5px;
--ls-title:-0.6px;
--ls-cta:0.1px;
--ls-overline:1px;
--ls-eyebrow:1.5px;
--ls-status:0.2px;
}

:root{
/* Spacing steps observed across the identity sheet and app frames */
--space-1:4px;
--space-2:5px;
--space-3:6px;
--space-4:8px;
--space-5:12px;
--space-6:16px;
--space-7:18px;
--space-8:20px;
--space-9:22px;
--space-10:24px;
--space-11:32px;
--space-12:40px;
--space-13:48px;
--space-14:80px;

/* Screen geometry */
--screen-w:360px;
--screen-h:800px;
--screen-gutter:22px;      /* onboarding body padding */
--screen-gutter-chrome:18px;/* status bar + header padding */
--statusbar-h:32px;
--header-h:50px;

/* Radii */
--radius-dot:3px;
--radius-sm:8px;
--radius-md:16px;
--radius-pill-sm:18px;
--radius-lg:20px;
--radius-pill:28px;
--radius-badge:16px;
--radius-bubble:4px 18px 18px 18px; /* @kind radius */
--radius-full:9999px;

/* Control sizes */
--control-h:56px;
--field-h:60px;
--icon-btn:36px;
--dot-w:22px;
--dot-h:6px;
}

:root{
/* The only elevation in the system: a soft purple bloom, no dark drop shadows. */
--shadow-soft:0 0 12px 0 rgba(105,0,171,0.1);
--shadow-sheet:0 4px 20px 0 rgba(0,0,0,0.2);
--shadow-hairline:inset 0 0 0 1px #E2E8F0;
--shadow-hairline-2:inset 0 0 0 2px #F72078;

/* Motion */
--ease-standard:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:320ms; /* @kind other */

/* Interaction */
--press-scale:0.98; /* @kind other */
--hover-lift:0 0 18px 0 rgba(105,0,171,0.16);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--text-strong);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--otenti-pink)}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--fw-extrabold);color:var(--text-strong)}
p{margin:0}