/* variables.css */

:root {
  /* Colors */
  --color-primary: #004c94;
  --color-secondary: #2E2E2E;
  --color-tertiary: #FAF9F6;
  --color-bg: var(--color-tertiary);
  --color-text: var(--color-secondary);
  --color-accent: var(--color-primary);

  /* Fonts */
  --font-body: 'Open Sans', sans-serif;
  --font-heading: 'Inter', sans-serif;

  /*
      Fluid spacing scale.
      --space-unit interpolates 6px -> 10px between a 375px and a 1375px
      viewport, then holds steady outside that range. Every token below
      derives from it, so the whole spacing system scales together.
    */
  --space-unit: clamp(6px, 0.4vw + 4.5px, 10px);
  --space-xs: calc(var(--space-unit) * 1);
  /* ~6px  -> 10px  */
  --space-sm: calc(var(--space-unit) * 2);
  /* ~12px -> 20px  */
  --space-md: calc(var(--space-unit) * 4);
  /* ~24px -> 40px  */
  --space-lg: calc(var(--space-unit) * 8);
  /* ~48px -> 80px  */
  --space-xl: calc(var(--space-unit) * 12);
  /* ~72px -> 120px */

  /* Grid */
  --grid-columns: 12;
  --grid-gap: var(--space-sm);
  --container-max: 1600px;
  --container-padding: clamp(16px, 4vw, var(--space-md));

  /* Motion */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;

  /* SVG Text */
  --diagram-title-size: clamp(12px, 0.6vw + 10.5px, 15px);
  --diagram-title-weight: 600;
  --diagram-label-size: clamp(11px, 0.5vw + 9.5px, 13px);
  --diagram-label-weight: 500;
  --diagram-caption-size: clamp(10px, 0.4vw + 9px, 12px);
  --diagram-caption-weight: 400;

  /* diagram stroke */
  --diagram-stroke-color: var(--color-secondary);
  --diagram-stroke-width: clamp(0.6px, 0.05vw + 0.55px, 0.9px);
  --diagram-dasharray-tight: 4 4;
  --diagram-dasharray-loose: 6 6;


  /* Lines & blocks */
  --line-width: 1px;
  --line-color: var(--color-text);
  --border-block: var(--line-width) solid var(--line-color);
  --block-unit: min(252px, 24vw);

  /* Layout */
  --page-top: var(--space-lg);
  --tap-target: 44px;

  /* Type (moved out of typography.css so other files can reuse them) */
  --fs-body: clamp(0.9375rem, 0.3vw + 0.875rem, 1rem);
  --fs-label: clamp(0.8125rem, 0.7961rem + 0.0658vw, 0.875rem);
  --fs-h3: clamp(1rem, 0.9342rem + 0.2632vw, 1.25rem);
  --fs-page-title: clamp(2rem, 1.4737rem + 2.1053vw, 4rem);
  --lh-tight: 1.1;
  --lh-snug: 1.3;

  /* Surfaces */
  --color-surface: #fff;
  --color-overlay: rgba(0, 0, 0, 0.85);


  /* Layout */
  --header-height: 64px;
  /* set the real header height */
  --copy-max: clamp(280px, 40vw, 480px);
  --copy-col: minmax(300px, 420px);
  --copy-col-tablet: minmax(260px, 340px);

  /* Fonts & colours */
  --font-mono: 'Courier New', monospace;
  --color-alert: #c0392b;
  --data-temp: #e0663e;
  --data-hum: #2e7de6;
  --data-pres: #3ba85a;
  --api-request-color: #1f6fd6;
  --api-response-color: #1f9d6f;
  --api-node-color: var(--color-secondary);

  /* Diagram */
  --diagram-stroke-bold: calc(var(--diagram-stroke-width) * 2);

  --font-diagram: var(--font-heading);   /* one family for all diagram text */

  --caption-h: 120px;
}

[data-theme="dark"] {
  --color-primary: #6AB0FF;
  --color-secondary: #D8D8D8;
  --color-tertiary: #1A1B1E;
  --color-bg: var(--color-tertiary);
  --color-text: var(--color-secondary);
  --color-accent: var(--color-primary);
  --color-surface: #1A1B1E;
  --api-request-color: #4d9fff; 
  --api-response-color: #3ecf8e;
}

[data-i18n] {
  opacity: 0;
}

html.i18n-ready [data-i18n] {
  opacity: 1;
  transition: opacity 0.15s ease-out;
}