/* ==========================================================================
 * LABBIE PLATFORM DESIGN SYSTEM V1 — TOKENS
 * The single source of truth for every universal visual value in Labbie.
 *
 * Authority: docs/design-system/LABBIE_PLATFORM_DESIGN_SYSTEM_V1.md
 * Reference: docs/design-system/assets/labbie-design-system-reference-v1.png
 *
 * RULES
 *   • No Labbie service may redefine these values locally.
 *   • Every token is prefixed `--lds-` so it can never collide with a page's
 *     own legacy custom properties during incremental migration.
 *   • Light mode only in V1. There is deliberately no dark-mode block.
 * ====================================================================== */

:root {

  /* ── 1. FOUNDATION COLOURS ─────────────────────────────────────────────
   * Apple-like cool neutrals. Deliberately NOT warm: the specification bans
   * cream and yellow-tinted page backgrounds, so every neutral here is
   * neutral-to-cool and the page ground is pure white.
   * Contrast figures are measured against #FFFFFF unless stated. */

  --lds-color-white:      #FFFFFF;
  --lds-color-black:      #000000;

  --lds-color-neutral-900: #1D1D1F;  /* near-black ink            17.4:1 */
  --lds-color-neutral-800: #3A3A3C;  /* pressed primary surface   11.3:1 (white on it) */
  --lds-color-neutral-600: #6E6E73;  /* secondary ink              5.1:1 AA */
  --lds-color-neutral-500: #8E8E93;  /* utility grey / control edge 3.3:1 non-text AA */
  --lds-color-neutral-300: #D2D2D7;  /* button + surface edge */
  --lds-color-neutral-250: #E8E8ED;  /* disabled primary surface */
  --lds-color-neutral-200: #E5E5EA;  /* hairline separator */
  --lds-color-neutral-150: #EBEBF0;  /* pressed secondary surface */
  --lds-color-neutral-100: #F5F5F7;  /* muted / inset surface */

  /* ── 2. SEMANTIC SURFACES ──────────────────────────────────────────────
   * Pure white page, white component surfaces, delicate separation. */

  --lds-color-page:             var(--lds-color-white);
  --lds-color-surface:          var(--lds-color-white);
  --lds-color-surface-muted:    var(--lds-color-neutral-100);
  --lds-color-surface-hover:    var(--lds-color-neutral-100);
  --lds-color-surface-pressed:  var(--lds-color-neutral-150);
  --lds-color-surface-disabled: var(--lds-color-neutral-250);

  /* ── 3. SEMANTIC TEXT ──────────────────────────────────────────────────
   * `text-disabled` is deliberately the SAME value as `text-secondary`:
   * the specification requires disabled states to stay READABLE, so the
   * non-interactive signal is carried by surface, shadow removal, cursor and
   * aria-disabled — never by dropping the label below AA contrast. */

  --lds-color-text-primary:   var(--lds-color-neutral-900);
  --lds-color-text-secondary: var(--lds-color-neutral-600);
  --lds-color-text-inverse:   var(--lds-color-white);
  --lds-color-text-disabled:  var(--lds-color-neutral-600);

  /* ── 4. BORDERS ────────────────────────────────────────────────────────
   * Border restraint: a hairline, used only where surface contrast and
   * spacing are not enough. `border-control` is the one border that IS the
   * only visual boundary of a control (text fields), so it meets the 3:1
   * non-text contrast minimum on its own. */

  --lds-border-width:         1px;
  --lds-color-border:         var(--lds-color-neutral-200);
  --lds-color-border-strong:  var(--lds-color-neutral-300);
  --lds-color-border-control: var(--lds-color-neutral-500);

  /* ── 5. APPLE SEMANTIC ICON COLOURS ────────────────────────────────────
   * Fixed palette from the specification. Icons are coloured by MEANING.
   * Never pick a value here directly for a new purpose — use, or add to, the
   * meaning map in section 6. */

  --lds-color-blue:   #007AFF;
  --lds-color-green:  #34C759;
  --lds-color-indigo: #5856D6;
  --lds-color-teal:   #30B0C7;
  --lds-color-orange: #FF9500;
  --lds-color-red:    #FF3B30;
  --lds-color-purple: #AF52DE;
  --lds-color-gray:   #8E8E93;

  /* ── 6. SEMANTIC ICON MEANING MAP ──────────────────────────────────────
   * The centralized mapping so no page invents its own icon colours.
   * The same meaning uses the same colour everywhere in the platform. */

  --lds-icon-color-information:   var(--lds-color-blue);    /* info, links, primary actions */
  --lds-icon-color-success:       var(--lds-color-green);   /* success, completion, positive status */
  --lds-icon-color-ai:            var(--lds-color-indigo);  /* AI, automation, intelligent features */
  --lds-icon-color-communication: var(--lds-color-teal);    /* messaging, calls, updates */
  --lds-icon-color-warning:       var(--lds-color-orange);  /* warning, attention, caution */
  --lds-icon-color-destructive:   var(--lds-color-red);     /* errors, destructive, critical */
  --lds-icon-color-generative:    var(--lds-color-purple);  /* generation, creative tools */
  --lds-icon-color-inactive:      var(--lds-color-gray);    /* disabled, inactive, neutral utility */
  --lds-icon-color-on-primary:    var(--lds-color-white);   /* white icon on the dark primary button */
  --lds-icon-color-neutral:       var(--lds-color-text-primary);

  /* ── 7. STATUS SURFACES ────────────────────────────────────────────────
   * Tinted grounds only. Status TEXT always uses `text-primary`, so no
   * status ever depends on hue to be readable, and never on colour alone. */

  --lds-color-status-success-surface: #EAF7EE;
  --lds-color-status-warning-surface: #FFF4E5;
  --lds-color-status-error-surface:   #FFECEB;
  --lds-color-status-info-surface:    #E9F2FF;
  --lds-color-status-neutral-surface: var(--lds-color-neutral-100);

  /* ── 8. TYPOGRAPHY ─────────────────────────────────────────────────────
   * Apple's San Francisco design language via the NATIVE system stack.
   * No Apple font file is bundled, copied or committed: Apple devices resolve
   * San Francisco through -apple-system / BlinkMacSystemFont, and every other
   * platform falls back through the list. */

  --lds-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                     "Helvetica Neue", Arial, sans-serif;

  --lds-font-weight-regular:  400;
  --lds-font-weight-medium:   500;
  --lds-font-weight-semibold: 600;
  --lds-font-weight-bold:     700;

  /* Role scale — base (tablet and desktop). Mobile overrides are in §14.
   * Body never shrinks below 17px on any breakpoint. */

  --lds-type-large-title-size:    34px;
  --lds-type-large-title-leading: 41px;
  --lds-type-large-title-weight:  var(--lds-font-weight-bold);
  --lds-type-large-title-tracking: -0.022em;

  --lds-type-title-size:    28px;
  --lds-type-title-leading: 34px;
  --lds-type-title-weight:  var(--lds-font-weight-semibold);
  --lds-type-title-tracking: -0.02em;

  --lds-type-headline-size:    17px;
  --lds-type-headline-leading: 22px;
  --lds-type-headline-weight:  var(--lds-font-weight-semibold);
  --lds-type-headline-tracking: -0.012em;

  --lds-type-body-size:    17px;
  --lds-type-body-leading: 24px;
  --lds-type-body-weight:  var(--lds-font-weight-regular);
  --lds-type-body-tracking: -0.006em;

  --lds-type-callout-size:    16px;
  --lds-type-callout-leading: 21px;
  --lds-type-callout-weight:  var(--lds-font-weight-regular);
  --lds-type-callout-tracking: -0.004em;

  --lds-type-subheadline-size:    15px;
  --lds-type-subheadline-leading: 20px;
  --lds-type-subheadline-weight:  var(--lds-font-weight-regular);
  --lds-type-subheadline-tracking: -0.002em;

  --lds-type-caption-1-size:    13px;
  --lds-type-caption-1-leading: 18px;
  --lds-type-caption-1-weight:  var(--lds-font-weight-regular);
  --lds-type-caption-1-tracking: 0em;

  --lds-type-caption-2-size:    12px;
  --lds-type-caption-2-leading: 16px;
  --lds-type-caption-2-weight:  var(--lds-font-weight-regular);
  --lds-type-caption-2-tracking: 0em;

  /* ── 9. SPACING ────────────────────────────────────────────────────────
   * 4px base grid. */

  --lds-space-0:  0px;
  --lds-space-1:  4px;
  --lds-space-2:  8px;
  --lds-space-3:  12px;
  --lds-space-4:  16px;
  --lds-space-5:  20px;
  --lds-space-6:  24px;
  --lds-space-7:  32px;
  --lds-space-8:  40px;
  --lds-space-9:  48px;
  --lds-space-10: 64px;
  --lds-space-11: 80px;

  /* ── 10. RADII ─────────────────────────────────────────────────────────
   * `radius-lg` (16px) is the UNIVERSAL control radius: every button and
   * every standard card uses it. `radius-full` exists for status dots and
   * spinners only — it must never be applied to a button. */

  --lds-radius-sm:   8px;
  --lds-radius-md:   12px;
  --lds-radius-lg:   16px;
  --lds-radius-xl:   22px;
  --lds-radius-full: 999px;

  /* ── 11. SHADOW ────────────────────────────────────────────────────────
   * ONE universal shadow recipe for the whole platform. Cards, buttons,
   * menus and dialogs all use this single token. Reach for borders, spacing
   * and surface contrast before ever considering a stronger shadow — and do
   * not add a second shadow token. */

  --lds-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --lds-shadow-none: none;

  /* ── 12. MOTION ────────────────────────────────────────────────────────
   * Every duration is routed through these tokens so the reduced-motion
   * block in state.css can neutralise all of them in one place. */

  --lds-duration-fast: 120ms;
  --lds-duration:      180ms;
  --lds-ease:          cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── 13. FOCUS ─────────────────────────────────────────────────────────
   * Blue #007AFF measures 4.0:1 on white and 4.2:1 against the near-black
   * primary button, so the ring clears the 3:1 non-text minimum on both
   * grounds it is ever drawn against. */

  --lds-focus-color:  var(--lds-color-blue);
  --lds-focus-width:  2px;
  --lds-focus-offset: 2px;

  /* ── 14. LAYOUT AND RESPONSIVE ─────────────────────────────────────────
   * Three breakpoints: mobile ≤599, tablet 600–1023, desktop ≥1024.
   * Button height and icon size are ABSENT from every responsive override
   * on purpose — they are fixed on all breakpoints by specification. */

  --lds-container-max:    1120px;
  --lds-container-narrow: 760px;
  --lds-page-padding:     var(--lds-space-4);   /* mobile default; raised below */
  --lds-section-gap:      var(--lds-space-7);
  --lds-touch-target-min: 44px;

  /* ── 15. BUTTON GEOMETRY (NON-NEGOTIABLE) ──────────────────────────────
   * Primary and secondary share every one of these values, in every state,
   * on every breakpoint. */

  --lds-button-height:         48px;
  --lds-button-radius:         var(--lds-radius-lg);
  --lds-button-padding-inline: 24px;
  --lds-button-icon-size:      24px;
  --lds-button-icon-gap:       8px;
  --lds-button-min-width:      120px;
  --lds-button-label-size:     15px;
  --lds-button-label-weight:   var(--lds-font-weight-semibold);

  /* ── 16. ICONS ─────────────────────────────────────────────────────────
   * The universal 24px rule. Stroke values match the existing Labbie sprite
   * (frontend/assets/labbie-icons.svg) rather than overriding it. */

  --lds-icon-size:         24px;
  --lds-icon-stroke-width: 2;

  /* ── 17. FIELDS ────────────────────────────────────────────────────────
   * Field height matches the button height so a field and a button can sit
   * on one row without either breaking the universal geometry. */

  --lds-field-height:         48px;
  --lds-field-radius:         var(--lds-radius-md);
  --lds-field-padding-inline: var(--lds-space-4);
}

/* Tablet */
@media (min-width: 600px) {
  :root {
    --lds-page-padding: var(--lds-space-6);
    --lds-section-gap:  var(--lds-space-8);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --lds-page-padding: var(--lds-space-7);
    --lds-section-gap:  var(--lds-space-9);
  }
}

/* Mobile type scale — titles only. Body, callout, subheadline and captions
 * are unchanged so reading text never shrinks on a phone. */
@media (max-width: 599px) {
  :root {
    --lds-type-large-title-size:    30px;
    --lds-type-large-title-leading: 36px;

    --lds-type-title-size:    24px;
    --lds-type-title-leading: 30px;
  }
}