/* ============================================================
   Checkbox Design System — Colors & Typography tokens
   Source of truth: Figma "Checkbox Design System.fig"
   ============================================================ */

/* -------- Fonts -------- */
@font-face{font-family:"Euclid Circular A";font-weight:300;font-style:normal;src:url("./fonts/EuclidCircularA-Light.otf") format("opentype");}
@font-face{font-family:"Euclid Circular A";font-weight:300;font-style:italic;src:url("./fonts/EuclidCircularA-LightItalic.otf") format("opentype");}
@font-face{font-family:"Euclid Circular A";font-weight:400;font-style:normal;src:url("./fonts/EuclidCircularA-Regular.otf") format("opentype");}
@font-face{font-family:"Euclid Circular A";font-weight:400;font-style:italic;src:url("./fonts/EuclidCircularA-RegularItalic.otf") format("opentype");}
@font-face{font-family:"Euclid Circular A";font-weight:500;font-style:normal;src:url("./fonts/EuclidCircularA-Medium.otf") format("opentype");}
@font-face{font-family:"Euclid Circular A";font-weight:500;font-style:italic;src:url("./fonts/EuclidCircularA-MediumItalic.otf") format("opentype");}
@font-face{font-family:"Euclid Circular A";font-weight:600;font-style:normal;src:url("./fonts/EuclidCircularA-Semibold.otf") format("opentype");}
@font-face{font-family:"Euclid Circular A";font-weight:600;font-style:italic;src:url("./fonts/EuclidCircularA-SemiboldItalic.otf") format("opentype");}
@font-face{font-family:"Euclid Circular A";font-weight:700;font-style:normal;src:url("./fonts/EuclidCircularA-Bold.otf") format("opentype");}
@font-face{font-family:"Euclid Circular A";font-weight:700;font-style:italic;src:url("./fonts/EuclidCircularA-BoldItalic.otf") format("opentype");}

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  /* ---- Font families ---- */
  --font-display: "Euclid Circular A", "Inter", system-ui, sans-serif;     /* headings, covers, hero */
  --font-ui:      "Inter", system-ui, sans-serif;                          /* product UI — body, buttons, forms */
  --font-body:    "Inter", system-ui, sans-serif;                          /* reading copy */
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;         /* code, tokens, spec labels */

  /* =========================================================
     COLORS — Checkbox AA (all pass WCAG AA for stated usage)
     ========================================================= */

  /* Primary (Green CTA) */
  --c-primary-hover:   #17ba86;
  --c-primary-default: #15a779;
  --c-primary-click:   #12956b;

  /* Secondary (Ink / dark CTA) */
  --c-secondary-hover:   #263544;
  --c-secondary-default: #0e1f36;
  --c-secondary-click:   #0b192b;

  /* Special (light-green outline CTA) */
  --c-special-hover:   #d5f2e8;
  --c-special-default: #c5ede0;
  --c-special-click:   #beebdc;

  /* Delete (destructive) */
  --c-delete-hover:   #d92d2d;
  --c-delete-default: #ca1919;
  --c-delete-click:   #a81313;
  --c-bg-delete:      #f7dddd;

  /* Disabled */
  --c-disabled-100: #fbfbfb;
  --c-disabled-150: #f2f2f2;
  --c-disabled-200: #e3e3e3;
  --c-disabled-300: #dadada;
  --c-disabled-400: #d1d1d1;
  --c-disabled-500: #b7b7b7;
  --c-disabled-600: #a3a3a3;

  /* Alerts (semantic) */
  --c-alert-info:    #0777c3;
  --c-alert-success: #0a855d;
  --c-alert-warning: #db7600;
  --c-alert-issue:   #a90000;

  /* Links */
  --c-link:        #2133a1;
  --c-link-on-dark:#ffffff;

  /* Studio blocks (workflow authoring) */
  --c-block-question:    #0e5cbd;
  --c-block-functions:   #8a8a46;
  --c-block-connectors:  #6570c9;
  --c-block-document:    #4679b4;
  --c-block-workflow:    #576277;
  --c-block-integration: #718237;

  /* Neutral background scale */
  --c-bg-grey-800:  #182333;
  --c-bg-grey-700:  #2d3b55; /* Header */
  --c-bg-grey-600:  #424f66;
  --c-bg-grey-500:  #576277;
  --c-bg-grey-450:  #6c7688;
  --c-bg-grey-400:  #818999;
  --c-bg-grey-350:  #969daa;
  --c-bg-grey-300:  #d5d8dd;
  --c-bg-grey-250:  #eaebee;
  --c-bg-grey-200:  #f2f3f5;
  --c-bg-grey-100:  #f9f9fa;
  --c-bg-grey-50:   #fdfdfd;
  --c-bg-white:     #ffffff;
  --c-bg-tablecell: #e8f8f3;
  --c-bg-tooltip:   #03060b;
  --c-bg-modal:     #51627b;

  /* Text (foreground) */
  --c-fg-primary:     #040608; /* PrimaryHeading */
  --c-fg-section:     #121622;
  --c-fg-strong-txt:  #182353;
  --c-fg-standard:    #242f44; /* StandardTxt — the dominant body ink */
  --c-fg-input:       #424f66; /* InputDescription */
  --c-fg-input-default:#576277;
  --c-fg-suggestion:  #969daa;
  --c-fg-placeholder: #d5d8dd;
  --c-fg-white:       #ffffff;
  --c-fg-disabled:    #a3a3a3;

  /* Tertiary (dark ink button) */
  --c-tertiary-hover:   #424f66;
  --c-tertiary-default: #26354a;
  --c-tertiary-click:   #0e1f36;

  /* Tags (paired A=text-on-B, B=bg) */
  --c-tag-grey-a:        #323232; --c-tag-grey-b:        #d6d6d6;
  --c-tag-teal-a:        #056368; --c-tag-teal-b:        #daf4f5;
  --c-tag-teal-dark-a:   #044855; --c-tag-teal-dark-b:   #c0d1d4;
  --c-tag-blue-a:        #0671df; --c-tag-blue-b:        #daeafa;
  --c-tag-royalblue-a:   #0014ca; --c-tag-royalblue-b:   #dfe3f8;
  --c-tag-purple-a:      #6500ca; --c-tag-purple-b:      #e9e1f8;
  --c-tag-iris-a:        #7039ff; --c-tag-iris-b:        #ede6ff;
  --c-tag-green-a:       #00794d; --c-tag-green-b:       #dfeeed;
  --c-tag-brown-a:       #934e12; --c-tag-brown-b:       #fde1c9;
  --c-tag-red-a:         #a80000; --c-tag-red-b:         #ffc9c9;
  --c-tag-mustard-a:     #cf9400; --c-tag-mustard-b:     #ffebb8;

  /* Accent */
  --c-accent-salmon: #fc647b;
  --c-accent-iris:   #7039ff;  /* used in illustrations / studio highlights */

  /* Brand gradients */
  --grad-brand:     linear-gradient(135deg,#5befa0 0%,#1bda9d 50%,#17ba86 100%);
  --grad-cover-bg:  linear-gradient(180deg,#0c1411 0%,#0c1411 100%);
  --grad-cover-wave:#5865f2; /* solid iris wave on covers */

  /* =========================================================
     SPACING (4pt grid — the system runs on 4 / 8 / 12 / 16 ...)
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* =========================================================
     RADII
     ========================================================= */
  --radius-xs: 2px;   /* chip inner */
  --radius-sm: 4px;   /* cards, inputs, buttons (default) */
  --radius-md: 6px;   /* buttons alt */
  --radius-lg: 8px;   /* modals, larger cards */
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS (Figma Shadows page, token names preserved)
     All use rgba(28,100,208,·) — a blue-tinted elevation
     ========================================================= */
  --shadow-btn-100: 0 2px 2px 0 rgba(28,100,208,0.08);
  --shadow-btn-200: 0 4px 6px 0 rgba(28,100,208,0.10);
  --shadow-btn-300: 0 6px 10px 0 rgba(28,100,208,0.12);
  --shadow-50:      0 1px 2px 0 rgba(28,100,208,0.06);
  --shadow-100:     0 2px 8px 0 rgba(28,100,208,0.08);
  --shadow-200:     0 8px 24px 0 rgba(28,100,208,0.10);
  --shadow-300:     0 16px 40px 0 rgba(28,100,208,0.12);
  --shadow-icon:    0 2px 6px 0 rgba(28,100,208,0.10);

  /* =========================================================
     BORDERS
     ========================================================= */
  --border-hairline: 1px solid var(--c-bg-grey-300);
  --border-input:   1px solid var(--c-bg-grey-350);
  --border-focus:   2px solid var(--c-primary-default);

  /* =========================================================
     MOTION
     ========================================================= */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-standard: cubic-bezier(.2,.0,.0,1);
  --ease-emphasis: cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   TYPOGRAPHY — semantic classes (match Figma class names)
   ========================================================= */

html, body { font-family: var(--font-ui); color: var(--c-fg-standard); }

.Title       { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1.1;  letter-spacing:-.01em; color: var(--c-fg-primary); }
.Heading01   { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.15; color: var(--c-fg-primary); }
.Heading02   { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--c-fg-section); }
.Heading03   { font-family: var(--font-ui);      font-weight: 500; font-size: 20px; line-height: 1.3;  color: var(--c-fg-section); }
.Heading04   { font-family: var(--font-ui);      font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--c-fg-section); }

.TextStrong  { font-family: var(--font-ui); font-weight: 600; font-size: 16px; line-height: 1.5;  color: var(--c-fg-standard); }
.Text        { font-family: var(--font-ui); font-weight: 400; font-size: 16px; line-height: 1.5;  color: var(--c-fg-standard); }
.SmallText   { font-family: var(--font-ui); font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--c-fg-standard); }
.Byline      { font-family: var(--font-ui); font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--c-fg-input); }
.BylineHeavy { font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1.45; color: var(--c-fg-input); }
.Caption     { font-family: var(--font-ui); font-weight: 400; font-size: 12px; line-height: 1.4;  color: var(--c-fg-input); }
.Label       { font-family: var(--font-ui); font-weight: 700; font-size: 12px; line-height: 1.3;  letter-spacing: .04em; text-transform: uppercase; color: var(--c-fg-input); }

.BtnAccessibleAA { font-family: var(--font-ui); font-weight: 600; font-size: 16px; line-height: 1; }
.BtnSmall        { font-family: var(--font-ui); font-weight: 600; font-size: 14px; line-height: 1; }
.BtnXSmall       { font-family: var(--font-ui); font-weight: 600; font-size: 12px; line-height: 1; }
.BtnAdd          { font-family: var(--font-ui); font-weight: 600; font-size: 14px; line-height: 1; }

.Link100 { color: var(--c-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.Link200 { color: var(--c-link); font-weight: 600; text-decoration: none; }
.Link200:hover { text-decoration: underline; }

.Quote   { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 24px; line-height: 1.35; color: var(--c-fg-primary); }

.Mono    { font-family: var(--font-mono); font-size: 12px; color: var(--c-fg-input); }

/* Native tag mappings — optional convenience */
h1 { @extend .Title; }