/* ==========================================================================
   LoveLink — IBM Carbon Design System token layer
   --------------------------------------------------------------------------
   Two themes, Dawn and Twilight. These are LoveLink's names for Carbon's own
   White and Gray 100 themes: the values below are Carbon's, not invented
   alongside them, because a design system you override is not a design system.

   Anything that is NOT Carbon is marked [product] and kept to a minimum — in
   this file there is exactly one such token, the moon accent, and it exists
   because the product's whole mechanic is a phase of the moon.

   Grid: Carbon's 2px spacing scale. Type: Carbon's v11 scale, IBM Plex Sans.
   ========================================================================== */

:root,
[data-theme='dawn'] {
  color-scheme: light;

  /* --- Carbon: background & layers (White theme) --- */
  --cds-background: #ffffff;
  --cds-background-hover: #e8e8e8;
  --cds-layer-01: #f4f4f4;
  --cds-layer-02: #ffffff;
  --cds-layer-03: #f4f4f4;
  --cds-layer-hover-01: #e8e8e8;
  --cds-field-01: #f4f4f4;
  --cds-field-02: #ffffff;

  /* --- Carbon: borders --- */
  --cds-border-subtle-01: #e0e0e0;
  --cds-border-subtle-02: #e0e0e0;
  --cds-border-strong-01: #8d8d8d;
  --cds-border-inverse: #161616;

  /* --- Carbon: text --- */
  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-text-placeholder: #a8a8a8;
  --cds-text-helper: #6f6f6f;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #ffffff;
  --cds-text-error: #da1e28;

  /* --- Carbon: icons --- */
  --cds-icon-primary: #161616;
  --cds-icon-secondary: #525252;
  --cds-icon-on-color: #ffffff;

  /* --- Carbon: interactive & support --- */
  --cds-interactive: #0f62fe;
  --cds-link-primary: #0f62fe;
  --cds-link-primary-hover: #0043ce;
  --cds-link-visited: #8a3ffc;
  --cds-focus: #0f62fe;
  --cds-focus-inset: #ffffff;
  --cds-button-primary: #0f62fe;
  --cds-button-primary-hover: #0043ce;
  --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: #0043ce;
  --cds-button-danger-primary: #da1e28;
  --cds-button-danger-hover: #b81921;
  --cds-button-disabled: #c6c6c6;
  --cds-support-error: #da1e28;
  --cds-support-error-inverse: #fa4d56;
  --cds-support-success: #24a148;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #0043ce;
  --cds-support-info-inverse: #4589ff;

  /* --- Carbon: overlays & skeleton --- */
  --cds-overlay: rgba(22, 22, 22, 0.5);
  --cds-skeleton-background: #e8e8e8;
  --cds-skeleton-element: #c6c6c6;

  /* --- [product] The moon. The one colour that is ours. --- */
  --ll-moon: #d9a441;
  --ll-moon-soft: rgba(217, 164, 65, 0.14);
  --ll-moon-line: rgba(217, 164, 65, 0.45);
}

[data-theme='twilight'] {
  color-scheme: dark;

  /* --- Carbon: background & layers (Gray 100 theme) --- */
  --cds-background: #161616;
  --cds-background-hover: #353535;
  --cds-layer-01: #262626;
  --cds-layer-02: #393939;
  --cds-layer-03: #525252;
  --cds-layer-hover-01: #333333;
  --cds-field-01: #262626;
  --cds-field-02: #393939;

  /* --- Carbon: borders --- */
  --cds-border-subtle-01: #393939;
  --cds-border-subtle-02: #525252;
  --cds-border-strong-01: #6f6f6f;
  --cds-border-inverse: #f4f4f4;

  /* --- Carbon: text --- */
  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --cds-text-placeholder: #6f6f6f;
  --cds-text-helper: #8d8d8d;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #161616;
  --cds-text-error: #ff8389;

  /* --- Carbon: icons --- */
  --cds-icon-primary: #f4f4f4;
  --cds-icon-secondary: #c6c6c6;
  --cds-icon-on-color: #ffffff;

  /* --- Carbon: interactive & support --- */
  --cds-interactive: #4589ff;
  --cds-link-primary: #78a9ff;
  --cds-link-primary-hover: #a6c8ff;
  --cds-link-visited: #be95ff;
  --cds-focus: #ffffff;
  --cds-focus-inset: #161616;
  --cds-button-primary: #0f62fe;
  --cds-button-primary-hover: #0353e9;
  --cds-button-primary-active: #002d9c;
  --cds-button-secondary: #6f6f6f;
  --cds-button-secondary-hover: #606060;
  --cds-button-secondary-active: #393939;
  --cds-button-tertiary: #78a9ff;
  --cds-button-tertiary-hover: #a6c8ff;
  --cds-button-danger-primary: #da1e28;
  --cds-button-danger-hover: #b81921;
  --cds-button-disabled: #525252;
  --cds-support-error: #ff8389;
  --cds-support-error-inverse: #da1e28;
  --cds-support-success: #42be65;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #4589ff;
  --cds-support-info-inverse: #0043ce;

  /* --- Carbon: overlays & skeleton --- */
  --cds-overlay: rgba(22, 22, 22, 0.7);
  --cds-skeleton-background: #292929;
  --cds-skeleton-element: #393939;

  /* --- [product] The moon, lifted for a dark field --- */
  --ll-moon: #f0c674;
  --ll-moon-soft: rgba(240, 198, 116, 0.16);
  --ll-moon-line: rgba(240, 198, 116, 0.5);
}

/* ==========================================================================
   Carbon: spacing — the 2px grid
   ========================================================================== */
:root {
  --cds-spacing-01: 0.125rem; /*  2px */
  --cds-spacing-02: 0.25rem;  /*  4px */
  --cds-spacing-03: 0.5rem;   /*  8px */
  --cds-spacing-04: 0.75rem;  /* 12px */
  --cds-spacing-05: 1rem;     /* 16px */
  --cds-spacing-06: 1.5rem;   /* 24px */
  --cds-spacing-07: 2rem;     /* 32px */
  --cds-spacing-08: 2.5rem;   /* 40px */
  --cds-spacing-09: 3rem;     /* 48px */
  --cds-spacing-10: 4rem;     /* 64px */
  --cds-spacing-11: 5rem;     /* 80px */
  --cds-spacing-12: 6rem;     /* 96px */
  --cds-spacing-13: 10rem;    /* 160px */

  /* Carbon: layout */
  --cds-layout-margin: 1rem;
  --cds-layout-gutter: 2rem;
  --cds-max-content: 66rem;   /* Carbon's 1056px content width */
  --cds-max-prose: 40rem;

  /* Carbon: motion — productive & expressive */
  --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-ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
}

/* ==========================================================================
   Carbon: type scale (v11). Family is IBM Plex Sans, self-hosted.
   ========================================================================== */
:root {
  --cds-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --cds-font-mono: 'IBM Plex Mono', 'Menlo', 'Courier New', monospace;

  --cds-type-display-01: 300 2.625rem/1.19 var(--cds-font-sans);   /* 42 */
  --cds-type-display-02: 300 3.375rem/1.17 var(--cds-font-sans);   /* 54 */
  --cds-type-display-03: 300 4.75rem/1.14 var(--cds-font-sans);    /* 76 */
  --cds-type-heading-01: 600 0.875rem/1.43 var(--cds-font-sans);   /* 14 */
  --cds-type-heading-02: 600 1rem/1.5 var(--cds-font-sans);        /* 16 */
  --cds-type-heading-03: 400 1.25rem/1.4 var(--cds-font-sans);     /* 20 */
  --cds-type-heading-04: 400 1.75rem/1.29 var(--cds-font-sans);    /* 28 */
  --cds-type-heading-05: 400 2rem/1.25 var(--cds-font-sans);       /* 32 */
  --cds-type-heading-06: 400 2.625rem/1.19 var(--cds-font-sans);   /* 42 */
  --cds-type-body-01: 400 0.875rem/1.43 var(--cds-font-sans);      /* 14 */
  --cds-type-body-02: 400 1rem/1.5 var(--cds-font-sans);           /* 16 */
  --cds-type-label-01: 400 0.75rem/1.33 var(--cds-font-sans);      /* 12 */
  --cds-type-label-02: 400 0.875rem/1.29 var(--cds-font-sans);     /* 14 */
  --cds-type-helper-01: 400 0.75rem/1.33 var(--cds-font-sans);     /* 12 */
  --cds-type-code-01: 400 0.75rem/1.33 var(--cds-font-mono);       /* 12 */
  --cds-type-code-02: 400 0.875rem/1.43 var(--cds-font-mono);      /* 14 */

  --cds-type-tracking: 0.16px; /* Carbon's body letter-spacing */
}

/* ==========================================================================
   Carbon: the 12-column grid
   ========================================================================== */
:root {
  --cds-grid-columns: 12;
}

/* ==========================================================================
   LoveLink: rhythm
   --------------------------------------------------------------------------
   Carbon gives a spacing scale; it does not give a page rhythm. These are the
   decisions about how much air goes where, kept in one place so that every
   page breathes the same way. Nothing below sets a section's own padding by
   hand: a page composes .ll-section and .ll-band, and the rhythm holds.

   The scale is deliberately geometric — roughly ×1.5 at each step — because a
   page reads as considered when its gaps are recognisably the same few values
   rather than a hundred nearly-identical ones.
   ========================================================================== */
:root {
  /* Content measure and gutters */
  --ll-wrap: 84rem;          /* the widest a page ever gets */
  --ll-measure: 32rem;       /* a column of prose, set for reading */
  --ll-measure-wide: 44rem;  /* a lede, or a statement */
  --ll-gutter: 1.375rem;

  /* Vertical rhythm — the distance between one idea and the next */
  --ll-y-hero: clamp(4rem, 12vw, 10rem);
  --ll-y-section: clamp(4.5rem, 8vw, 8rem);
  --ll-y-band: clamp(5rem, 11vw, 10rem);
  --ll-y-tight: clamp(2.5rem, 5vw, 4rem);

  /* Flow — the gap between stacked siblings */
  --ll-gap-2xs: 0.5rem;
  --ll-gap-xs: 0.75rem;
  --ll-gap-sm: 1.125rem;
  --ll-gap-md: 1.75rem;
  --ll-gap-lg: 2.75rem;
  --ll-gap-xl: 4rem;
  --ll-gap-2xl: 6rem;

  /* Component measurements */
  --ll-tile-pad: clamp(1.5rem, 3vw, 2.5rem);
  --ll-radius: 0;            /* Carbon is square; only tags round, and they say so */
  --ll-moon-halo: 0 0 0 1px var(--ll-moon-line);
}
@media (min-width: 42rem) {
  :root { --ll-gutter: 2.25rem; }
}
@media (min-width: 66rem) {
  :root { --ll-gutter: 3.5rem; }
}