/* ============================================================
   adesso Design System · colors_and_type.css
   The single source of truth for color + type tokens.
   ------------------------------------------------------------
   Fira Sans family pulled from Google Fonts. The real adesso
   webfonts (Fira) ship with the corporate identity — drop them
   into /fonts and swap the @font-face block when available.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Fira+Sans+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fira+Sans+Extra+Condensed:wght@400;500;600;700;800&family=Fira+Mono:wght@400;500;700&display=swap");

:root {
  /* ----------------------------------------------------------
     PRIMARY · adesso blue
     Anchor: #006ec7 — the brand color, used for logo, primary
     buttons, links, focus rings, and brand-surface fills.
     ---------------------------------------------------------- */
  --indigo-50:  oklch(0.97 0.02 248);
  --indigo-100: oklch(0.93 0.05 248);
  --indigo-200: oklch(0.86 0.10 248);
  --indigo-300: oklch(0.74 0.14 248);
  --indigo-400: oklch(0.64 0.16 248);
  --indigo-500: #006ec7;          /* brand anchor */
  --indigo-600: oklch(0.46 0.15 248);
  --indigo-700: oklch(0.36 0.12 248);
  --indigo-800: oklch(0.26 0.09 248);
  --indigo-900: oklch(0.16 0.05 248);

  --adesso-blue:           #006ec7; /* canonical adesso blue */
  --adesso-blue-deep:      #206bb4; /* PPT gradient base */

  /* ----------------------------------------------------------
     DESIGN COLORS (PowerPoint theme · row 1)
     The eight accent colors that ship with the official
     adesso PPT template, used for charts, callouts, badges.
     ---------------------------------------------------------- */
  --d-blue:    #006ec7;
  --d-purple:  #461ebe;
  --d-peach:   #ff9868;
  --d-taupe:   #887d75;
  --d-lime:    #76c800;
  --d-pink:    #f566ba;
  --d-mint:    #28dcaa;

  /* Custom colors (PowerPoint row 2 · status / emphasis) */
  --d-red:     #ee0000;
  --d-yellow:  #ffc000;
  --d-green:   #76c800;

  /* PowerPoint theme: neutral support (light) */
  --d-bg-paper:   #e7e5e3;
  --d-bg-ash:     #cfcbc8;
  --d-bg-stone:   #aca49e;

  /* ----------------------------------------------------------
     NEUTRALS · cool ink (slight blue cast)
     ---------------------------------------------------------- */
  --ink-0:    #ffffff;
  --ink-50:   oklch(0.985 0.003 264);
  --ink-100:  oklch(0.965 0.004 264);
  --ink-200:  oklch(0.925 0.006 264);
  --ink-300:  oklch(0.86  0.008 264);
  --ink-400:  oklch(0.72  0.010 264);
  --ink-500:  oklch(0.55  0.012 264);
  --ink-600:  oklch(0.42  0.012 264);
  --ink-700:  oklch(0.32  0.010 264);
  --ink-800:  oklch(0.22  0.008 264);
  --ink-900:  oklch(0.15  0.006 264);
  --ink-1000: #0f1120;

  /* ----------------------------------------------------------
     STATUS
     ---------------------------------------------------------- */
  --success:  oklch(0.55 0.13 152);
  --warning:  oklch(0.72 0.14 75);
  --danger:   oklch(0.55 0.18 25);
  --info:     oklch(0.58 0.13 230);

  /* ----------------------------------------------------------
     GRADIENTS · the PPT library
     Six families × two directions. All terminate in
     --adesso-blue-deep (#206bb4) to read as "adesso".
     Use sparingly — these are statement surfaces, not bg.
     ---------------------------------------------------------- */
  --grad-teal-v:    linear-gradient(180deg, #27dbaa 0%, #206bb4 100%);
  --grad-teal-h:    linear-gradient(90deg,  #49ceb1 0%, #006ec7 100%);
  --grad-lime-v:    linear-gradient(180deg, #bae281 0%, #206bb4 100%);
  --grad-lime-h:    linear-gradient(90deg,  #b9e381 0%, #016fc6 100%);
  --grad-peach-v:   linear-gradient(180deg, #ffae88 0%, #206bb4 100%);
  --grad-peach-h:   linear-gradient(90deg,  #ffad88 0%, #026ec6 100%);
  --grad-coral-v:   linear-gradient(180deg, #fe8e9a 0%, #206bb4 100%);
  --grad-coral-h:   linear-gradient(90deg,  #d689a1 0%, #056fc7 100%);
  --grad-rose-v:    linear-gradient(180deg, #f8a3d5 0%, #206bb4 100%);
  --grad-rose-h:    linear-gradient(90deg,  #f7a3d5 0%, #026ec8 100%);
  --grad-violet-v:  linear-gradient(180deg, #461ebd 0%, #206bb4 100%);
  --grad-violet-h:  linear-gradient(90deg,  #461ebd 0%, #016dc7 100%);

  /* ----------------------------------------------------------
     SEMANTIC tokens — what UI code should reference
     ---------------------------------------------------------- */
  --bg:               var(--ink-0);
  --bg-muted:         var(--ink-50);
  --bg-card:          var(--ink-0);
  --bg-inverse:       var(--ink-1000);
  --border:           var(--ink-200);
  --border-strong:    var(--ink-300);
  --text:             var(--ink-900);
  --text-muted:       var(--ink-600);
  --text-subtle:      var(--ink-500);
  --text-inverse:     var(--ink-0);
  --primary:          var(--adesso-blue);
  --primary-hover:    var(--indigo-600);
  --primary-active:   var(--indigo-700);
  --on-primary:       var(--ink-0);
  --link:             var(--adesso-blue);
  --focus-ring:       var(--indigo-100);

  /* ----------------------------------------------------------
     TYPE FAMILIES
     Fira Sans = body, UI, all running text.
     Fira Sans Condensed = display, headlines, big numbers.
     Fira Mono = labels, kbd, code, captions, tabular data.
     ---------------------------------------------------------- */
  --font-sans:  "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cond:  "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;
  --font-xcond: "Fira Sans Extra Condensed", "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;
  --font-mono:  "Fira Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* TYPE WEIGHTS */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* ----------------------------------------------------------
     SEMANTIC TYPE TOKENS
     ---------------------------------------------------------- */
  --display-1-font:   var(--font-cond);
  --display-1-size:   96px;
  --display-1-line:   0.92;
  --display-1-track:  -0.025em;
  --display-1-weight: 500;

  --display-2-font:   var(--font-cond);
  --display-2-size:   72px;
  --display-2-line:   0.98;
  --display-2-track:  -0.02em;
  --display-2-weight: 500;

  --h1-font:    var(--font-cond);
  --h1-size:    48px;
  --h1-line:    1.05;
  --h1-track:   -0.015em;
  --h1-weight:  500;

  --h2-font:    var(--font-cond);
  --h2-size:    36px;
  --h2-line:    1.12;
  --h2-track:   -0.01em;
  --h2-weight:  500;

  --h3-font:    var(--font-cond);
  --h3-size:    26px;
  --h3-line:    1.22;
  --h3-track:   -0.005em;
  --h3-weight:  500;

  --h4-font:    var(--font-sans);
  --h4-size:    18px;
  --h4-line:    1.35;
  --h4-weight:  600;

  --body-l-size:  17px;
  --body-l-line:  1.55;
  --body-size:    15px;
  --body-line:    1.55;
  --body-s-size:  13px;
  --body-s-line:  1.5;

  --caption-font:   var(--font-mono);
  --caption-size:   11px;
  --caption-line:   1.45;
  --caption-case:   uppercase;
  --caption-track:  0.08em;

  --code-font:   var(--font-mono);
  --code-size:   13px;
  --code-line:   1.5;
}

/* ============================================================
   ELEMENT DEFAULTS
   Drop this stylesheet on a page and headings/paragraphs/etc
   pick up the right type out of the box.
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-track);
  font-weight: var(--h1-weight);
  margin: 0 0 0.4em;
}
h2, .h2 {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-track);
  font-weight: var(--h2-weight);
  margin: 0 0 0.4em;
}
h3, .h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-track);
  font-weight: var(--h3-weight);
  margin: 0 0 0.5em;
}
h4, .h4 {
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  font-weight: var(--h4-weight);
  margin: 0 0 0.5em;
}
p, .body {
  font-size: var(--body-size);
  line-height: var(--body-line);
  margin: 0 0 1em;
  text-wrap: pretty;
}
.body-l { font-size: var(--body-l-size); line-height: var(--body-l-line); }
.body-s { font-size: var(--body-s-size); line-height: var(--body-s-line); color: var(--text-muted); }

.display-1 {
  font-family: var(--display-1-font);
  font-size: var(--display-1-size);
  line-height: var(--display-1-line);
  letter-spacing: var(--display-1-track);
  font-weight: var(--display-1-weight);
}
.display-2 {
  font-family: var(--display-2-font);
  font-size: var(--display-2-size);
  line-height: var(--display-2-line);
  letter-spacing: var(--display-2-track);
  font-weight: var(--display-2-weight);
}

.caption {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  text-transform: var(--caption-case);
  letter-spacing: var(--caption-track);
  color: var(--text-subtle);
}

code, kbd, samp, pre, .mono {
  font-family: var(--code-font);
  font-size: var(--code-size);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--indigo-200); color: var(--indigo-900); }

/* ============================================================
   SPACING · radii · shadows  (system tokens)
   ============================================================ */
:root {
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --r-0: 0;     --r-1: 2px;   --r-2: 4px;   --r-3: 8px;
  --r-4: 12px;  --r-5: 16px;  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(15,17,32,.06),  0 0 0 1px rgba(15,17,32,.04);
  --shadow-2: 0 2px 6px rgba(15,17,32,.06),  0 1px 2px rgba(15,17,32,.04);
  --shadow-3: 0 8px 20px rgba(15,17,32,.08), 0 2px 4px rgba(15,17,32,.05);
  --shadow-4: 0 24px 48px rgba(15,17,32,.12),0 4px 10px rgba(15,17,32,.06);
}