/* =========================================================================
   Arc design tokens
   =========================================================================

   These are the raw design values from the Arc component library in Figma
   (file gQ7caWnRM9AcvM0EVxfqUd). A "token" is just a named value: instead of
   writing #1a1a1a in fifty places, you write var(--arc-primary) once and
   change the colour here when the design changes.

   Names match the Figma variables exactly, so a value here can be traced
   straight back to a variable in the design file. See
   brain/reference/DESIGN_SYSTEM.md for the map.

   This file loads FIRST, before every other stylesheet, because everything
   else reads from it.

   Scope note: only the tokens Arc actually uses in code are listed. The
   Figma collection also holds Text Disabled, Warning Surface, Warning Text,
   Border Input, Glass Fill and Glass Pill; they are left out on purpose
   rather than guessed at, and should be added here (with their real Figma
   values) the first time code needs them.
   ========================================================================= */

:root {
    /* ---------------------------------------------------------------------
       Arc Color - Light mode
       Figma collection: VariableCollectionId:5202:312, mode Light (5202:0)

       "Primary" does double duty as body text and as the primary button fill.
       That is deliberate: both invert together in dark mode. The label on a
       primary button uses On Primary, which flips the other way.
       --------------------------------------------------------------------- */
    --arc-primary: #1a1a1a;
    --arc-secondary: #6b6b78;
    --arc-destructive: #c21405;
    --arc-border: #e7e7e7;
    --arc-surface: #ffffff;
    /* The slightly-off-white every dialog sits on. Not pure white - that is
       the whole point of the Arc dialog look. */
    --arc-surface-sunken: #f8f8f8;
    /* The neutral disc an emoji avatar sits on. */
    --arc-surface-plate: #e8e8ed;
    --arc-on-primary: #ffffff;

    /* The default Arc icon: the brand red monogram, the same on every theme
       and in light and dark. Read by both .header-avatar (index.html) and
       .arc-dialog-avatar, so the face in a dialog cannot drift from the face
       in the header. Not a Figma variable - Figma draws the avatar with an
       emoji on a plate and has no monogram default. */
    --arc-avatar-default: linear-gradient(135deg, #e96d5b, #c2402f);

    /* The dim behind every dialog. Primary at 60%, not black - that keeps the
       dim slightly warm instead of dead neutral. */
    --arc-scrim: rgba(26, 26, 26, 0.6);

    /* ---------------------------------------------------------------------
       Arc Scale - spacing, radius and control sizes
       Figma collection: VariableCollectionId:6242:47, one mode (6242:5)
       --------------------------------------------------------------------- */
    --arc-space-2: 2px;
    --arc-space-4: 4px;
    --arc-space-8: 8px;
    --arc-space-10: 10px;
    --arc-space-12: 12px;
    --arc-space-16: 16px;
    --arc-space-20: 20px;
    --arc-space-24: 24px;
    --arc-space-32: 32px;
    --arc-space-48: 48px;

    --arc-radius-4: 4px;
    --arc-radius-8: 8px;
    --arc-radius-16: 16px;
    --arc-radius-20: 20px;
    --arc-radius-full: 100px;

    --arc-size-control: 48px;
    --arc-size-control-sm: 40px;
    --arc-size-icon: 24px;
    --arc-size-icon-lg: 32px;
    --arc-size-avatar-sm: 72px;
    --arc-size-avatar-md: 80px;
    --arc-size-avatar-lg: 92px;

    /* ---------------------------------------------------------------------
       Type
       Figma text styles, re-pointed at Arc's own font.

       The Figma file is set in Geist. Arc does not ship Geist, and the app is
       set in the system font with Inter for a few display elements, so the
       SIZES, WEIGHTS and SPACING below come from Figma while the FAMILY
       stays Arc's. Swapping in Geist later means changing one line.
       --------------------------------------------------------------------- */
    --arc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Title/Dialog */
    --arc-type-title-size: 20px;
    --arc-type-title-weight: 700;
    --arc-type-title-tracking: -0.2px;

    /* Body */
    --arc-type-body-size: 14px;
    --arc-type-body-line: 20px;
    --arc-type-body-weight: 400;

    /* Label/Large - the label on a pill button */
    --arc-type-label-size: 16px;
    --arc-type-label-line: 16px;
    --arc-type-label-weight: 600;

    /* Micro - legal fine print */
    --arc-type-micro-size: 10px;
    --arc-type-micro-line: 14px;
    --arc-type-micro-weight: 400;
}