/* sumairha.com design system, part 1: tokens.
 * Every colour, size, space and speed on the site is named here and nowhere else; components.css builds from these and
 * the pages build from components.css. The style guide (styleguide.html) reads this file and shows every token in both themes.
 *
 * Colour flips with the theme. Light is the default, whatever the visitor's device is set to; dark comes only from data-theme="dark" on
 * <html>, which the theme switch sets and remembers. Everything else is the same in both themes.
 *
 * The idea the tokens serve: the material says what a thing does. Type alone says. A flat surface holds. Glass presses.
 * One solid shape is the main action. Underlined text is a link. */

/* ---- colour, light ---- */
:root{
  --bg:#ffffff;                       /* the ground the fluid sits on */
  --scrim:rgba(255,255,255,.25);      /* a veil over the fluid so type stays readable */
  --text:rgba(13,13,13,.62);          /* body text and quiet labels */
  --text-strong:#0d0d0d;              /* titles, hover, anything that must be read first */
  --surface-1:rgba(13,13,13,.035);    /* things that hold: quiet */
  --surface-2:rgba(13,13,13,.06);     /* standard */
  --surface-3:rgba(13,13,13,.10);     /* solid, for dense text */
  --surface-line:rgba(13,13,13,.11);  /* the hairline round a surface */
  --pill:rgba(0,0,0,.06);             /* glass: the fill and the rim the CSS draws until the shader takes over */
  --pill-line:rgba(0,0,0,.10);
  --accent:#d4005a;                   /* the main action, and the first ink of the fluid */
  --accent-2:#1f5fd6;                 /* the second ink of the fluid */
  --on-accent:#ffffff;                /* text on the accent */
  --chip:#0d0d0d;                     /* active: the filled chip */
  --on-chip:#ffffff;
  --focus:#1f5fd6;                    /* the keyboard focus ring */
  --cursor:#0d0d0d;                   /* her Webflow cursor: the dot, the circle's fill, its rim */
  --cursor-fill:rgba(13,13,13,.06);
  --cursor-line:rgba(13,13,13,.2);
}
/* ---- colour, dark: only when chosen (data-theme="dark"); the system setting is ignored ---- */
:root[data-theme="dark"]{
  --bg:#000000;
  --scrim:rgba(0,0,0,.3);
  --text:rgba(255,255,255,.6); --text-strong:#ffffff;
  --surface-1:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.07); --surface-3:rgba(255,255,255,.12); --surface-line:rgba(255,255,255,.14);
  --pill:rgba(255,255,255,.2); --pill-line:rgba(255,255,255,.13);
  --accent:#ffa51b; --accent-2:#8338ec; --on-accent:#0d0d0d;
  --chip:#ffffff; --on-chip:#0d0d0d;
  --focus:#ffa51b;
  --cursor:#ffffff; --cursor-fill:rgba(255,255,255,.1); --cursor-line:rgba(255,255,255,.2);
}

/* ---- everything else: the same in both themes ---- */
:root{
  /* type: two faces, locked 8 Oct 2026. Bricolage Grotesque says (every headline, from the statement to a project's name).
     Inter does (the interface and everything read). Sora is retired: it was the interface and title face until the lock. */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-text:Inter,system-ui,sans-serif;
  /* type: roles, as a font shorthand (weight, size / line height, family) and a tracking */
  --type-statement:600 clamp(36px,5.4vw,56px)/1.08 var(--font-display);   --track-statement:-.02em;   /* the first section's statement */
  --type-title:600 clamp(26px,3.4vw,40px)/1.08 var(--font-display);       --track-title:-.02em;       /* a section title */
  --type-card-title:500 clamp(18px,2vw,22px)/1.2 var(--font-display);                                 /* a project's name */
  --type-button:500 14px/1.3 var(--font-text);                            --track-button:.01em;       /* the main action */
  --type-label:500 13px/1 var(--font-text);                               --track-label:.01em;        /* a pill's items, a tag */
  --type-body:400 16px/1.6 var(--font-text);                                                          /* proposed: reading text */
  --type-small:400 13px/1.5 var(--font-text);                                                         /* captions, hints, notes */
  --type-meta:500 13px/1.3 var(--font-text);                                                          /* the categories under a name */
  --type-case:700 clamp(40px,6vw,72px)/1.02 var(--font-display);          --track-case:-.02em;        /* proposed: a case-study title */

  /* space: an 8 px grid, with a half step. The rule (8 Oct 2026): distance follows meaning. The closer two things are in meaning,
     the closer they sit, and every gap between things is one of these steps. A component's own padding (a pill, a tag) is part
     of its shape and may sit between them.
       2xs   4  one unit: a number and its label, a name and its role
       xs    8  a label and what it labels: an eyebrow or a section number and its title, a picture and its caption,
                a card's title and its text
       sm   16  things in a set: cards in a grid, a block's text and its own picture or switch
       md   24  the blocks of a section's text; the padding inside a card
       lg   48  one group and the next inside a section: the text and a wide picture, one screen and the next
       xl   80  one section and the next */
  --space-2xs:4px; --space-xs:8px; --space-sm:16px; --space-md:24px; --space-lg:48px; --space-xl:80px;
  --column:1100px;     /* the one reading column: the statement, the projects, the guide */
  --gutter:16px;       /* the page's side padding */

  /* shape: a capsule presses, a rounded rectangle holds */
  --radius-s:10px;     /* a picture's corners, a tag */
  --radius-m:20px;     /* a surface */
  --radius-pill:100px; /* anything pressable */

  /* depth */
  --shadow-card:0 14px 34px rgba(0,0,0,.2);
  --shadow-action:0 10px 26px rgba(0,0,0,.2);

  /* motion */
  --dur-fast:.2s;      /* colour and chip changes */
  --dur-base:.3s;      /* fades, the label roll, the cursor growing */
  --dur-slow:.5s;      /* a picture's zoom */
  --dur-theme:.4s;     /* the switch between light and dark */
  --ease-out:ease-out;
  --ease-roll:cubic-bezier(.338,.015,.395,.959);   /* Motion's rolling text button */
  --ease-zoom:cubic-bezier(.2,.7,.2,1);

  /* layers */
  --z-fluid:0; --z-scrim:1; --z-page:2; --z-corner:3; --z-cursor-ring:9998; --z-cursor-dot:9999;
}