/* Generated by packages/design-tokens/build.mjs — do not edit.
   Edit packages/design-tokens/tokens.mjs and re-run the generator.
   Source of truth for every value here: design/design.md.
   Read directly by apps/website. */

:root {
  /* --- Color: Base + Surface Hierarchy --- */
  --base:                  #0e0e0f;   /* near-black — the room */
  --surface-1:             #141415;   /* cards, tiles — one step up */
  --surface-2:             #1a1a1b;   /* raised elements */
  --surface-3:             #222224;   /* highest contrast surface */

  /* --- Color: Text --- */
  --text-primary:          #f0f0f0;   /* headlines, primary copy */
  --text-secondary:        #8a8a8e;   /* secondary labels, meta */

  /* --- Color: Accent (one, flat, the only thing asking for attention) --- */
  --accent:                #00e676;   /* the button, the click */
  --accent-hover:          #00c965;   /* accent-fill-hover */
  --accent-text:           #73ecaf;   /* accent-300 — the accent as type on this ground */
  --accent-line:           #11613b;   /* a decorative accent edge, not a control's */
  --on-accent:             #0a0a0a;   /* near-black text on the accent */

  /* --- Color: Edges ---
     A divider may sit below 3:1; the edge of a control is the only thing
     saying where the clickable area ends, so it clears it. Solid rather than
     the alpha pair the site carried, because an alpha edge resolves to a
     different colour on the page, on a card and in a well — see §3.4. */
  --line:                  #545459;   /* 2.57:1 on this ground */
  --line-strong:           #65656a;   /* 3.33:1 — controls */
  --veil:                  rgba(255, 255, 255, 0.04);   /* a fill, not an edge */

  /* --- Color: States --- */
  --warn:                  #fde68a;
  --warn-tint:             #342a19;
  --warn-line:             #674815;
  --success:               #73ecaf;
  --success-tint:          #172e24;
  --success-line:          #11613b;
  --danger:                #fecdd3;
  --danger-tint:           #341e23;
  --danger-line:           #662732;

  /* --- Shadow --- */
  --shadow-ambient: 0px 12px 32px rgba(0, 0, 0, 0.32);

  /* --- Typography (Inter only) --- */
  --font:  'Inter', sans-serif;

  /* --- Border Radius --- */
  --radius-sm:      0.375rem;
  --radius-md:      0.5rem;
  --radius-lg:      0.75rem;
  --radius-full:    9999px;
}

/* The product itself is light-native: the extension renders inside LinkedIn's
   near-white page. Scope any element with .theme-light and the roles above
   flip to the light table, so a mockup of the product on this dark page can
   be built from the same components as the page around it — and is coloured
   from the same source as the extension it depicts. */
.theme-light {
  color-scheme: light;
  --base:                  #f7f7f8;
  --surface-1:             #ffffff;
  --surface-2:             #ffffff;
  --surface-3:             #f7f7f8;
  --text-primary:          #14161a;
  --text-secondary:        #383d44;
  --text-faint:            #5f646c;
  --accent:                #00e676;   /* the fill holds in both themes */
  --on-accent:             #0a0a0a;
  --accent-text:           #0b7a40;   /* accent-800 — accent as text needs the dark step on white */
  --accent-line:           #00a854;
  --line:                  #babec5;
  --line-strong:           #a3a8b2;
  --veil:                  #f7f7f8;
  --warn:                  #92400e;
  --warn-tint:             #fffbeb;
  --warn-line:             #d97706;
  --success:               #0b7a40;
  --success-tint:          #ecfff5;
}