/* ==========================================================================
   Design System Tokens — Based on IBM Carbon Design System
   Shared across all designs in this project.
   Modify these tokens to update the entire design system globally.
   ========================================================================== */

:root {
  /* ── Color: Core ─────────────────────────────────────────────────────── */

  /* Background */
  --cds-background:              #ffffff;
  --cds-background-hover:        rgba(141, 141, 141, 0.12);
  --cds-background-active:       rgba(141, 141, 141, 0.5);
  --cds-background-inverse:      #393939;
  --cds-background-brand:        #0f62fe;

  /* Layer (surfaces that sit on top of background) */
  --cds-layer-01:                #f4f4f4;
  --cds-layer-02:                #ffffff;
  --cds-layer-03:                #f4f4f4;
  --cds-layer-hover-01:          #e8e8e8;
  --cds-layer-hover-02:          #e8e8e8;
  --cds-layer-hover-03:          #e8e8e8;
  --cds-layer-active-01:         #c6c6c6;
  --cds-layer-active-02:         #c6c6c6;
  --cds-layer-active-03:         #c6c6c6;
  --cds-layer-selected-01:       #e0e0e0;
  --cds-layer-selected-02:       #e0e0e0;
  --cds-layer-selected-03:       #e0e0e0;

  /* Field (inputs, dropdowns) */
  --cds-field-01:                #f4f4f4;
  --cds-field-02:                #ffffff;
  --cds-field-03:                #f4f4f4;

  /* Border */
  --cds-border-subtle-00:        #e0e0e0;
  --cds-border-subtle-01:        #e0e0e0;
  --cds-border-strong-01:        #8d8d8d;
  --cds-border-interactive:      #0f62fe;
  --cds-border-inverse:          #161616;
  --cds-border-disabled:         #c6c6c6;

  /* ── Color: Text ─────────────────────────────────────────────────────── */
  --cds-text-primary:            #161616;
  --cds-text-secondary:          #525252;
  --cds-text-placeholder:        #a8a8a8;
  --cds-text-on-color:           #ffffff;
  --cds-text-helper:             #6f6f6f;
  --cds-text-error:              #da1e28;
  --cds-text-inverse:            #ffffff;
  --cds-text-disabled:           rgba(22, 22, 22, 0.25);

  /* ── Color: Link ─────────────────────────────────────────────────────── */
  --cds-link-primary:            #0f62fe;
  --cds-link-primary-hover:      #0043ce;
  --cds-link-visited:            #8a3ffc;
  --cds-link-inverse:            #78a9ff;

  /* ── Color: Interactive / Button ──────────────────────────────────────── */
  --cds-interactive:             #0f62fe;
  --cds-interactive-hover:       #0043ce;
  --cds-interactive-active:      #002d9c;

  --cds-button-primary:          #0f62fe;
  --cds-button-primary-hover:    #0353e9;
  --cds-button-primary-active:   #002d9c;
  --cds-button-secondary:        #393939;
  --cds-button-secondary-hover:  #474747;
  --cds-button-secondary-active: #6f6f6f;
  --cds-button-tertiary:         #0f62fe;
  --cds-button-tertiary-hover:   #0353e9;
  --cds-button-tertiary-active:  #002d9c;
  --cds-button-danger:           #da1e28;
  --cds-button-danger-hover:     #b81921;
  --cds-button-danger-active:    #750e13;
  --cds-button-disabled:         #c6c6c6;

  /* ── Color: Support / Status ──────────────────────────────────────────── */
  --cds-support-error:           #da1e28;
  --cds-support-success:         #198038;
  --cds-support-warning:         #f1c21b;
  --cds-support-info:            #0043ce;
  --cds-support-error-inverse:   #fa4d56;
  --cds-support-success-inverse: #42be65;
  --cds-support-warning-inverse: #f1c21b;
  --cds-support-info-inverse:    #4589ff;

  /* ── Color: Focus ─────────────────────────────────────────────────────── */
  --cds-focus:                   #0f62fe;
  --cds-focus-inset:             #ffffff;
  --cds-focus-inverse:           #ffffff;

  /* ── Color: Icon ──────────────────────────────────────────────────────── */
  --cds-icon-primary:            #161616;
  --cds-icon-secondary:          #525252;
  --cds-icon-on-color:           #ffffff;
  --cds-icon-interactive:        #0f62fe;
  --cds-icon-disabled:           rgba(22, 22, 22, 0.25);

  /* ── Color: Tag ───────────────────────────────────────────────────────── */
  --cds-tag-background-red:      #ffd7d9;
  --cds-tag-color-red:           #750e13;
  --cds-tag-background-green:    #a7f0ba;
  --cds-tag-color-green:         #044317;
  --cds-tag-background-blue:     #d0e2ff;
  --cds-tag-color-blue:          #002d9c;
  --cds-tag-background-purple:   #e8daff;
  --cds-tag-color-purple:        #491d8b;
  --cds-tag-background-teal:     #9ef0f0;
  --cds-tag-color-teal:          #004144;
  --cds-tag-background-gray:     #e0e0e0;
  --cds-tag-color-gray:          #161616;
  --cds-tag-background-warm-gray:#e5e0df;
  --cds-tag-color-warm-gray:     #272525;

  /* ── Spacing (Carbon 2x grid, 8px base) ──────────────────────────────── */
  --cds-spacing-01:  2px;
  --cds-spacing-02:  4px;
  --cds-spacing-03:  8px;
  --cds-spacing-04:  12px;
  --cds-spacing-05:  16px;
  --cds-spacing-06:  24px;
  --cds-spacing-07:  32px;
  --cds-spacing-08:  40px;
  --cds-spacing-09:  48px;
  --cds-spacing-10:  64px;
  --cds-spacing-11:  80px;
  --cds-spacing-12:  96px;
  --cds-spacing-13:  160px;

  /* ── Sizing ───────────────────────────────────────────────────────────── */
  --cds-size-xs:     24px;
  --cds-size-sm:     32px;
  --cds-size-md:     40px;
  --cds-size-lg:     48px;
  --cds-size-xl:     64px;
  --cds-size-2xl:    80px;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --cds-font-family:            'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cds-font-family-mono:       'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', monospace;

  /* Body */
  --cds-body-compact-01-size:    14px;
  --cds-body-compact-01-weight:  400;
  --cds-body-compact-01-lh:      18px;
  --cds-body-compact-01-ls:      0.16px;

  --cds-body-01-size:            14px;
  --cds-body-01-weight:          400;
  --cds-body-01-lh:              20px;
  --cds-body-01-ls:              0.16px;

  --cds-body-02-size:            16px;
  --cds-body-02-weight:          400;
  --cds-body-02-lh:              24px;
  --cds-body-02-ls:              0px;

  /* Headings */
  --cds-heading-01-size:         14px;
  --cds-heading-01-weight:       600;
  --cds-heading-01-lh:           18px;
  --cds-heading-01-ls:           0.16px;

  --cds-heading-02-size:         16px;
  --cds-heading-02-weight:       600;
  --cds-heading-02-lh:           22px;
  --cds-heading-02-ls:           0px;

  --cds-heading-03-size:         20px;
  --cds-heading-03-weight:       400;
  --cds-heading-03-lh:           26px;
  --cds-heading-03-ls:           0px;

  --cds-heading-04-size:         28px;
  --cds-heading-04-weight:       400;
  --cds-heading-04-lh:           36px;
  --cds-heading-04-ls:           0px;

  --cds-heading-05-size:         32px;
  --cds-heading-05-weight:       300;
  --cds-heading-05-lh:           40px;
  --cds-heading-05-ls:           0px;

  --cds-heading-06-size:         42px;
  --cds-heading-06-weight:       300;
  --cds-heading-06-lh:           50px;
  --cds-heading-06-ls:           0px;

  --cds-heading-07-size:         54px;
  --cds-heading-07-weight:       300;
  --cds-heading-07-lh:           64px;
  --cds-heading-07-ls:           0px;

  /* Label / Helper */
  --cds-label-01-size:           12px;
  --cds-label-01-weight:         400;
  --cds-label-01-lh:             16px;
  --cds-label-01-ls:             0.32px;

  --cds-helper-text-01-size:     12px;
  --cds-helper-text-01-weight:   400;
  --cds-helper-text-01-lh:       16px;
  --cds-helper-text-01-ls:       0.32px;

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --cds-radius-sm:   2px;
  --cds-radius-md:   4px;
  --cds-radius-lg:   8px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --cds-shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.3);
  --cds-shadow-md:   0 4px 8px rgba(0, 0, 0, 0.2);
  --cds-shadow-lg:   0 8px 16px rgba(0, 0, 0, 0.15);

  /* ── Motion / Transitions ─────────────────────────────────────────────── */
  --cds-duration-fast-01:        70ms;
  --cds-duration-fast-02:        110ms;
  --cds-duration-moderate-01:    150ms;
  --cds-duration-moderate-02:    240ms;
  --cds-duration-slow-01:        400ms;
  --cds-duration-slow-02:        700ms;
  --cds-easing-standard:         cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-easing-entrance:         cubic-bezier(0, 0, 0.38, 0.9);
  --cds-easing-exit:             cubic-bezier(0.2, 0, 1, 0.9);

  /* ── Grid / Layout ────────────────────────────────────────────────────── */
  --cds-grid-columns:            16;
  --cds-grid-gutter:             32px;
  --cds-grid-margin:             0;
}

/* ── Dark Theme Override ──────────────────────────────────────────────── */
/* Add [data-theme="dark"] or .cds-dark to <html> to activate */

[data-theme="dark"],
.cds-dark {
  --cds-background:              #161616;
  --cds-background-hover:        rgba(141, 141, 141, 0.16);
  --cds-background-active:       rgba(141, 141, 141, 0.4);
  --cds-background-inverse:      #f4f4f4;

  --cds-layer-01:                #262626;
  --cds-layer-02:                #393939;
  --cds-layer-03:                #525252;
  --cds-layer-hover-01:          #333333;
  --cds-layer-hover-02:          #474747;
  --cds-layer-hover-03:          #636363;
  --cds-layer-active-01:         #525252;
  --cds-layer-active-02:         #6f6f6f;
  --cds-layer-active-03:         #8d8d8d;
  --cds-layer-selected-01:       #393939;
  --cds-layer-selected-02:       #525252;
  --cds-layer-selected-03:       #6f6f6f;

  --cds-field-01:                #262626;
  --cds-field-02:                #393939;
  --cds-field-03:                #525252;

  --cds-border-subtle-00:        #393939;
  --cds-border-subtle-01:        #525252;
  --cds-border-strong-01:        #8d8d8d;
  --cds-border-inverse:          #f4f4f4;

  --cds-text-primary:            #f4f4f4;
  --cds-text-secondary:          #c6c6c6;
  --cds-text-placeholder:        #6f6f6f;
  --cds-text-on-color:           #ffffff;
  --cds-text-helper:             #8d8d8d;
  --cds-text-inverse:            #161616;
  --cds-text-disabled:           rgba(244, 244, 244, 0.25);

  --cds-link-primary:            #78a9ff;
  --cds-link-primary-hover:      #a6c8ff;
  --cds-link-inverse:            #0f62fe;

  --cds-icon-primary:            #f4f4f4;
  --cds-icon-secondary:          #c6c6c6;
  --cds-icon-disabled:           rgba(244, 244, 244, 0.25);

  --cds-focus:                   #ffffff;
  --cds-focus-inset:             #161616;

  --cds-shadow-sm:               0 2px 6px rgba(0, 0, 0, 0.6);
  --cds-shadow-md:               0 4px 8px rgba(0, 0, 0, 0.5);
  --cds-shadow-lg:               0 8px 16px rgba(0, 0, 0, 0.4);
}

/* ── Base Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--cds-font-family);
  font-size: var(--cds-body-01-size);
  line-height: var(--cds-body-01-lh);
  letter-spacing: var(--cds-body-01-ls);
  color: var(--cds-text-primary);
  background-color: var(--cds-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}