/*
 * Brand tokens. The only place these values live.
 * Rationale, allowed pairs and measured contrast: visual-brief.md
 *
 * Breakpoints (custom properties cannot be used inside @media, so they are fixed here):
 *   phone   : below 720px  (the default values on :root)
 *   tablet  : 720px and up
 *   desktop : 1024px and up
 */

:root {
  /* ---------- Colour: paper side (reading sections) ---------- */
  --paper: #FFFFFF;        /* page background */
  --paper-2: #F1F3F6;      /* alternate section background, cool grey */
  --line: #D3D9E0;         /* decorative hairline on paper; never the only carrier of meaning */
  --ink: #10161E;          /* primary text on paper; also the chat background */
  --ink-2: #414C59;        /* secondary text on paper */
  --ink-3: #5A6675;        /* large text (24px and up) and control edges on paper; never body text */

  /* ---------- Colour: ink side (hero, final call, every chat surface) ---------- */
  --bubble: #1F2731;       /* incoming (bot) bubble */
  --field: #19212B;        /* message field background */
  --line-ink: #33404E;     /* decorative hairline on ink */
  --edge-ink: #7F8C9B;     /* control edges on ink (message field border) */
  --on-ink: #F4F6F8;       /* primary text on ink and on bubble */
  --on-ink-2: #AEB8C4;     /* secondary text on ink and on bubble, bubble timestamps */
  --ink-press: #2A3542;    /* hover and pressed fill of an ink button */

  /* ---------- Colour: functional ---------- */
  --send: #0FB5AE;         /* THE brand colour (Lagoon). Change it here only: site, demos, logo, favicon, icon, logo files and
                              share pictures all read it (rebuild; rerun make_logo_files, make_lockups and
                              make_share_image for the marketing files). The videos keep Telegram's own purple. */
  --on-send: #10161E;      /* text on --send */
  --command: #74B9F5;      /* a tappable /command; only on --bubble or --ink */
  --name-a: #6FD9B0;       /* sender name in a group chat, person A; only on --bubble */
  --name-b: #FF9DB0;       /* sender name in a group chat, person B; only on --bubble */
  --focus-on-paper: #10161E;
  --focus-on-ink: #F4F6F8;
  --focus-on-send: #10161E;

  /* ---------- Type: families ---------- */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---------- Type: weights ---------- */
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* ---------- Type: scale, phone values ---------- */
  --display-size: 2.5rem;      --display-line: 1.05;  --display-track: -0.025em;  /* 40px, weight heavy */
  --h2-size: 1.875rem;         --h2-line: 1.15;       --h2-track: -0.02em;        /* 30px, weight heavy */
  --h3-size: 1.25rem;          --h3-line: 1.3;        --h3-track: -0.01em;        /* 20px, weight bold */
  --lead-size: 1.1875rem;      --lead-line: 1.45;     --lead-track: 0;            /* 19px, weight regular */
  --body-size: 1.0625rem;      --body-line: 1.55;     --body-track: 0;            /* 17px, weight regular */
  --small-size: 0.875rem;      --small-line: 1.5;     --small-track: 0;           /* 14px, weight regular */
  --button-size: 1.0625rem;    --button-line: 1;      --button-track: 0;          /* 17px, weight bold */
  --price-size: 4.5rem;        --price-line: 0.9;     --price-track: -0.04em;     /* 72px, weight heavy */

  /* Chat surfaces keep one size on every screen, so a bubble looks like a phone bubble everywhere. */
  --chat-size: 1.0625rem;      --chat-line: 1.35;                                 /* 17px, weight regular */
  --chat-name-size: 0.875rem;  --chat-name-line: 1.3;                             /* 14px, weight bold */
  --chat-meta-size: 0.75rem;   --chat-meta-line: 1;                               /* 12px, weight regular */
  --mono-size: 0.92em;         /* mono set inline in a sentence, relative to that sentence */

  /* ---------- Space: 4px base ---------- */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---------- Layout ---------- */
  --gutter: 1.25rem;          /* 20px side padding of the page */
  --section-y: 4rem;          /* 64px top and bottom padding of a section */
  --content-max: 70rem;       /* 1120px */
  --measure: 34rem;           /* 544px, longest line of running text */
  --chat-max: 25rem;          /* 400px, widest chat surface */
  --clip-max: 25rem;          /* 400px: under the clips' 600px width, so they stay sharp */
  --tap-min: 3rem;            /* 48px, smallest tappable height */

  /* ---------- Radius ---------- */
  --radius-bubble: 18px;      /* three corners of a bubble or a button */
  --radius-send: 6px;         /* the fourth corner: bottom-right when sent, bottom-left when received */
  --radius-media: 20px;       /* clips */
  --radius-field: 24px;       /* message field (half of its 48px height) */
  --radius-chip: 8px;         /* inline mono token, language switch */

  /* ---------- Border ---------- */
  --border-hair: 1px;
  --border-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 3px;

  /* ---------- Shadow ---------- */
  --shadow: none;             /* depth comes from ink against paper; nothing is lifted */

  /* ---------- Motion ---------- */
  --dur-tap: 120ms;           /* press feedback on a command or a button */
  --dur-enter: 200ms;         /* a bubble arriving */
  --dur-shift: 260ms;         /* the chat column moving up to make room */
  --dur-open: 180ms;          /* a question opening */
  --beat: 1100ms;             /* pause between two scripted chat steps */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);    /* things arriving */
  --ease-move: cubic-bezier(0.3, 0, 0, 1);       /* things changing place */
  --enter-distance: 8px;      /* a bubble arrives from this far below */
}

@media (min-width: 720px) {
  :root {
    --gutter: 2rem;           /* 32px */
    --section-y: 6rem;        /* 96px */
    --display-size: 3.5rem;   /* 56px */
    --display-line: 1.02;
    --display-track: -0.03em;
    --h2-size: 2.25rem;       /* 36px */
    --price-size: 6rem;       /* 96px */
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 3rem;           /* 48px */
    --section-y: 7rem;        /* 112px */
    --display-size: 4.5rem;   /* 72px */
    --display-line: 1;
    --display-track: -0.035em;
    --h2-size: 2.75rem;       /* 44px */
    --h2-line: 1.1;
    --h3-size: 1.5rem;        /* 24px */
    --h3-line: 1.25;
    --lead-size: 1.375rem;    /* 22px */
    --body-size: 1.125rem;    /* 18px */
    --body-line: 1.6;
    --small-size: 0.9375rem;  /* 15px */
    --button-size: 1.125rem;  /* 18px */
    --price-size: 7.5rem;     /* 120px */
  }
}

/* People who ask for less motion get state changes with no travel.
   The chat demos and the clips still start by themselves (owner decision). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-tap: 0ms;
    --dur-enter: 0ms;
    --dur-shift: 0ms;
    --dur-open: 0ms;
    --enter-distance: 0px;
  }
}