/* ==========================================================================
   THEME: NEUTRAL
   ==========================================================================
   Default development theme. Deliberately restrained (gray-blue, system
   fonts, medium rounding) so that component bugs are visible and no
   client personality leaks into the base.
   ========================================================================== */

:root {
  /* 1. COLOR */
  --color-primary-50:  #f2f6f7;
  --color-primary-100: #e3ebee;
  --color-primary-200: #c5d7dc;
  --color-primary-300: #9fbcc5;
  --color-primary-400: #729ca9;
  --color-primary-500: #54818f;
  --color-primary-600: #446a77;
  --color-primary-700: #385762;
  --color-primary-800: #2d454e;
  --color-primary-900: #22343b;

  --color-primary: var(--color-primary-600);
  /* Second brand colour. Many brands are two-colour (yellow + blue is a
     classic trade pairing) and a single accent cannot carry them.

     Primary dominates — buttons, links, the things that act. Secondary
     accents — marks, numbers, decorative emphasis. If the brand has only
     one colour, set this to a primary shade: everything still reads as
     intentional, nothing needs a special case. */
  --color-secondary: #b4622f;
  /* Readable variant of the above — see theme-template.css. This terracotta
     already measures 4.44 on the white surface and 4.10 on the alt, so both
     tokens carry the same value and the baseline theme looks exactly as it
     did. The token exists for the themes where they diverge. */
  --color-secondary-strong: var(--color-secondary);

  --color-surface:         #ffffff;
  --color-surface-alt:     #f4f6f7;
  --color-surface-inverse: #22343b;

  --color-text:            #1e2a2f;
  --color-text-muted:      #5a6b71;
  --color-text-on-primary: #ffffff;
  --color-text-on-inverse: #eef3f4;

  --color-border: #d7e0e3;

  /* Feedback states. Four tokens each, which is what a notice actually
     needs: a tinted background, a line/icon colour, readable text on that
     tint, and text on the solid colour. Ten-step ramps were considered and
     rejected — steps nothing renders are steps a designer still has to
     fill in for every single client. */
  --color-success:        #2e7d4f;
  --color-success-soft:   #e8f2ec;
  --color-success-strong: #1d5033;
  --color-success-on:     #ffffff;

  --color-warning:        #9a630f;
  --color-warning-soft:   #faf0dd;
  --color-warning-strong: #6d4508;
  --color-warning-on:     #ffffff;

  --color-error:          #bb3a2e;
  --color-error-soft:     #fbe9e7;
  --color-error-strong:   #7d251d;
  --color-error-on:       #ffffff;

  --color-info:           #2b6b8f;
  --color-info-soft:      #e5f0f6;
  --color-info-strong:    #1a4459;
  --color-info-on:        #ffffff;

  /* 2. TYPOGRAPHY */
  --font-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Buttons stay in the body font here — the neutral theme is the plain
     baseline. A branded theme points this at its display face (see drga). */
  --font-button:  var(--font-body);

  --font-weight-heading: 700;
  --font-weight-body:    400;
  --font-weight-bold:    600;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.25rem + 1.4vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
  --text-4xl:  clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
  /* Hero only — see the note in drga.css. */
  --text-5xl:  clamp(2.75rem, 1.75rem + 4.4vw, 5rem);

  --leading-tight:   1.2;
  --leading-normal:  1.6;
  --leading-display: 1.04;

  --tracking-tight:   -0.015em;
  --tracking-display: -0.03em;

  /* 3. SHAPE */
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;
  --radius-panel: 32px;   /* inset section slabs */

  --border-width: 1px;

  /* 4. SPACE & DENSITY */
  --space-unit:    0.25rem;
  /* Same curve shape as drga's — see the note there. The ceiling has to
     arrive where there is width to justify it, not at 1300px. */
  --section-space: clamp(3.5rem, 1.75rem + 5.5vw, 8rem);
  --container-max: 75rem;

  /* 5. SHADOWS — layered, low-opacity; premium shadows are felt, not seen */
  --shadow-sm: 0 1px 2px rgb(16 32 38 / 0.05);
  --shadow-md: 0 2px 4px rgb(16 32 38 / 0.04), 0 8px 20px rgb(16 32 38 / 0.06);
  --shadow-lg: 0 4px 8px rgb(16 32 38 / 0.04), 0 20px 48px rgb(16 32 38 / 0.10);

  /* 6. MOTION */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --motion-easing:  var(--ease-out-expo);

  --motion-duration:      200ms;
  --motion-duration-slow: 400ms;

  --reveal-duration:       800ms;
  --reveal-duration-slow: 1000ms;
  --reveal-distance:        24px;
  --reveal-stagger:         90ms;
  --reveal-stagger-group:   90ms;
  --reveal-stagger-line:   120ms;
}