/* ==========================================================================
   BlueTTS tokens: one family, one ink, one paper, one blue, light only.
   Slate ink on one calm off-white paper for the whole page, white cards with
   a 1px edge, and one clear blue (the cloud logo's ramp) on what you press.
   The site has no dark theme by design: `color-scheme: light` keeps form
   controls and scrollbars light even when the OS is dark.

   Every color on the site is defined in the :root block below and nowhere
   else. The logo, favicons, app icons and link preview are fixed files from
   the logo kit (docs/logo/); they use the same ramp but do not read it here.
   ========================================================================== */

/* Rubik (OFL, see assets/fonts/OFL.txt), variable 300–900, self-hosted.
   Split by script like Google Fonts so a page only fetches what it shows. */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/assets/fonts/rubik-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/assets/fonts/rubik-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/assets/fonts/rubik-hebrew.woff2') format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/assets/fonts/rubik-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
    color-scheme: light;

    /* Color: slate neutrals with one blue, the cloud logo's ramp
       (#60A5FA the cloud, #3B82F6, 600 #2563EB, 700 #1D4ED8, 900 #1E3A8A, 100 #DBEAFE).
       Type prints in the slate ink #0F172A, the logo's own wordmark colour.
       One paper under the whole page, top to bottom (it no longer deepens
       toward blue on the way down); white cards sit on it with a 1px edge.
       The blue is kept for what you can press (the primary pills, Speak,
       links, focus) and the logo. Every grey sits on the slate hue (210-220),
       the blue's side of neutral: no violet cast. No glows, no dark bands. */
    --paper: #F8FAFC;          /* the page, header and footer: one calm off-white (slate 50) */
    --paper-2: #F1F5F9;        /* soft wells: icon tiles, the code card's head, hovers */
    --paper-deep: #F8FAFC;     /* kept as an alias: the page no longer fades to a deeper tone */
    --line: #E2E8F0;           /* 1px edges on cards and rules */
    --footer: #F8FAFC;         /* the footer: the same paper, set off by a hairline */
    --on-footer: #0F172A;      /* footer links: the ink, 17:1 */
    --on-footer-2: #526077;    /* footer headings and small print, 6.1:1 */
    --field: #FFFFFF;          /* every card: the demo, the recording, the code, the bots */
    --ink: #0F172A;            /* body text and headings: slate ink, 17:1 on paper */
    --ink-2: #475569;          /* secondary text, nav: 7.2:1 */
    --ink-3: #526077;          /* captions, small text, 6.1:1 */
    --heading: #0F172A;        /* h1, h2: the ink */
    --rule: #E2E8F0;           /* 1px dividers (= --line) */
    --rule-strong: #74839A;    /* input and play-button outlines (3.8:1 on white) */
    --accent: #1D4ED8;         /* links and code keywords: blue 700, 6.4:1 on paper */
    --primary: #2563EB;        /* primary pills and Speak: blue 600, 5.2:1 under white */
    --primary-hover: #1D4ED8;  /* blue 700, 6.7:1 under white */
    --accent-ink: #FFFFFF;     /* text on --accent and --primary */
    --accent-soft: #EFF6FF;    /* selected sample, hover wash: the ramp's lightest tint */
    --accent-soft-ink: #1E3A8A; /* text on --accent-soft (9.5:1); link hover, blue 900 (10:1) */
    --focus: #2563EB;          /* flat 2px focus ring, offset 2px: 4.9:1 on paper */
    --live: #2563EB;           /* playing state only: progress fill, playing button, the played waveform */
    --live-ink: #FFFFFF;       /* icon on --live, 5.2:1 */
    --ok: #2B6A3C;
    --warn: #855900;
    --error: #B0322A;
    --selection: #DBEAFE;      /* ::selection: blue 100, ink on it 14.6:1 */

    /* The stage: the recording's own dark frame, in its dialog (the kit's
       ink, the ground of its reversed lockup). */
    --stage: #0F172A;
    --on-stage: #FFFFFF;
    --on-stage-2: #A7B4C8;

    /* Depth. One card material for the whole page: white, a 1px edge, 24px
       corners and a hairline of shadow under it, so a card reads as a sheet
       of paper on the paper, never as a floating panel. Cards you can press
       (the bots, MamboTTS) deepen their edge on hover; nothing lifts. Only
       what really floats (dialogs, the picker lists, the phone bar) has a
       real shadow. Buttons are flat fills. */
    --shadow-card: 0 1px 2px rgb(15 23 42 / .04);
    --shadow-float: 0 24px 64px rgb(15 23 42 / .18), 0 2px 8px rgb(15 23 42 / .08);

    --logo-mark: #60A5FA;      /* the cloud's body (the files in assets/images carry it) */
    --logo-shade: #2563EB;     /* the cloud's inner shade, around its light */
    --logo-word: #0F172A;      /* the wordmark: always the ink or white, never blue */

    /* The bots: each app in its own colors, on its icon tile only (white
       glyph on the brand fill, below 3:1 by design: they are logos, the name
       beside them is text). */
    --whatsapp: #25D366;              /* WhatsApp green: icon tile */
    --telegram: #229ED9;              /* Telegram logo: circle, bottom of its gradient */
    --telegram-light: #2AABEE;        /* Telegram logo: top of its gradient */
    --on-brand: #FFFFFF;              /* glyph on a tile */

    /* Type: Rubik alone (drawn for Latin, Hebrew and Cyrillic together), on
       one strict scale, used the same way in every section:
         h1       the headline: 40–64, medium (500), tight
         h2       every section title: 30–42, medium (500), tight
         lede     the one line under a title: 18 (20 from 900), --ink-2
         body     lists, card text: 18 (16 in cards)
         caption  small notes, labels, footer: 14
       Interface text (buttons, nav, pills) is 16; the demo's text box is 24
       because it is a field you type in, not page text. Confident, not
       loud: titles in medium with tight tracking, never bold, never light. */
    --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* real code only */ /* taste-skill-ignore */
    --fs-small: 14px;                             /* caption */
    --fs-ui: 16px;                                /* nav, small buttons, labels, card text */
    --fs-control: 16px;                           /* buttons, selects; form fields never go under it (iOS zooms) */
    --fs-field: 24px;                             /* the demo's text box */
    --fs-body: 18px;                              /* body; 20 from 900 (below) */
    --fs-lede: var(--fs-body);                    /* the line under a title */
    --fs-h3: 18px;                                /* a card title or sub-heading, medium */
    --fs-h2: clamp(30px, 1.25vw + 24px, 42px);    /* 30 on phones, 42 from 1440 */
    --fs-h1: clamp(40px, 2.8vw + 24px, 64px);     /* 40 on phones, 52 at 1024, 64 from 1440 */
    --lh-heading: 1.08;
    --lh-h3: 1.3;
    --lh-body: 1.55;
    --lh-small: 1.45;
    --track-h1: -0.035em;
    --track-heading: -0.03em;

    /* Space (4, 8, 12, 16, 24, 32, 48, 72, 96) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 72px;
    --s-9: 96px;

    /* Layout: one container for everything (header, hero, every section,
       footer), 1120px wide, and a 640px prose column for the lines under
       titles. Every section has the same padding. */
    --container: 1120px;
    --measure: 640px;          /* the prose column */
    --gutter: 16px;
    --col-gap: var(--s-4);
    /* The vertical rhythm, in two steps. A titled section sits two
       band-pads from the content before it (80 on phones, 112 from 900);
       an untitled card (the recording, MamboTTS: .section-strip) takes half
       a band-pad, so it sits one and a half from its neighbours (60, 84). */
    --band-pad: 40px;
    --head-gap: var(--s-6);    /* a section's heading block to its content */
    --header-h: 64px;

    /* Buttons: one system. 48px default, 40px in the header (44px hit area). */
    --btn-h: 48px;
    --btn-h-sm: 40px;

    /* Shape: corners grow with the size of the thing. */
    --r-toggle: 8px;
    --r-control: 10px;
    --r-btn: 999px;            /* buttons are pills */
    --r-media: 12px;           /* pictures inside a card */
    --r-panel: 24px;           /* every card and dialog */

    /* Motion */
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-out-quint: cubic-bezier(.22, 1, .36, 1); /* small arrivals: menus, dialogs */
    --ease-in: cubic-bezier(.4, 0, 1, 1);           /* departures: faster than arrivals */
    --dur-press: 120ms;
    --dur-fade: 150ms;
    --ease-expo: cubic-bezier(.16, 1, .3, 1);       /* the one reveal, the bars */
    --dur-reveal: 560ms;                            /* a part arriving */
    --stagger: 60ms;                                /* between the parts of one group */
}

@media (min-width: 900px) {
    :root {
        --gutter: 32px;
        --col-gap: var(--s-5);
        --band-pad: 56px;
        --head-gap: var(--s-7);
        --fs-body: 20px;
        --header-h: 72px;
    }
}