/* ==========================================================================
   Astratech Solutions — Design tokens

   Every colour, space, size, radius and duration used anywhere in this
   project is declared here. No other stylesheet may hardcode a raw value.
   ========================================================================== */

:root {

  /* -- Colour ------------------------------------------------------------
     Two commodities, one palette. The anchor is a deep sea-black — the colour
     of water at depth, not of ink — because marine protein is the lead
     programme and the fishery is where the company's credibility starts. The
     ground is a warm bone: this is an agricultural exporter, and a cold white
     would fight the produce photography instead of carrying it.

     One accent, and it is brass rather than gold. Gold on a trading site
     reads as a claim; brass reads as an instrument. It is used only on rules,
     on the mark, and on the one call to action per screen. Three hues total. */

  --color-ink-900: #071316;   /* deepest ground — footer, contact */
  --color-ink-800: #0C1D21;   /* primary dark surface */
  --color-ink-700: #142B30;   /* elevated dark surface */
  --color-ink-600: #23444A;   /* dividers on dark */
  --color-ink-400: #8AA2A8;   /* muted text on dark — 7.02:1, AA verified */
  --color-ink-200: #BACACD;   /* secondary text on dark — 11.15:1 */

  /* Ground is a warm bone rather than a paper white. It sits under produce
     photography for most of the page and a neutral white would make the
     greens and reds read as artificially saturated. */
  --color-ground-000: #FDFCF9;
  --color-ground-100: #F7F4EE;  /* page ground */
  --color-ground-200: #EDE8DE;  /* alternate section — the product index */
  --color-ground-300: #DBD3C4;  /* hairlines on light */

  /* Accent. --color-accent-600 is the only one used for text on a light
     ground; it is held dark enough to clear AA on every ground token above
     (5.96 / 5.57 / 5.01), because it carries small uppercase label text and
     that is where accent colours usually fail. */
  --color-accent-600: #7E5C1C;  /* accent on light — AA verified */
  --color-accent-500: #A87F32;  /* accent, primary — buttons and rules */
  --color-accent-300: #D8B472;  /* accent on dark — 9.60:1 on ink-900 */

  --color-text-primary: var(--color-ink-900);
  --color-text-secondary: #4A5A57;
  --color-text-on-dark: var(--color-ground-100);
  --color-text-on-dark-muted: var(--color-ink-200);

  --color-surface: var(--color-ground-100);
  --color-surface-alt: var(--color-ground-200);
  --color-surface-dark: var(--color-ink-800);
  --color-border: var(--color-ground-300);
  --color-border-on-dark: var(--color-ink-600);

  --color-focus-ring: var(--color-accent-500);

  /* -- Typography ---------------------------------------------------------- */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
  --text-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-md:   clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
  --text-lg:   clamp(1.25rem, 1.16rem + 0.45vw, 1.4375rem);
  --text-xl:   clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem);
  --text-2xl:  clamp(1.875rem, 1.6rem + 1.3vw, 2.625rem);
  --text-3xl:  clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
  --text-4xl:  clamp(2.75rem, 2.1rem + 3.1vw, 4.25rem);

  --leading-tight: 1.08;
  --leading-snug: 1.35;
  --leading-body: 1.7;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* -- Space (8px base, modular) -------------------------------------------- */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 11rem;

  /* Section padding. This was clamp(5rem, 4rem + 7vw, 11rem) — 11rem top
     and bottom on a desktop, 22rem between one section's content and the
     next — and it read as a gap, not as breathing room. Halved, and capped
     at 7rem: sections still separate cleanly by background colour and the
     hairline, and the page reads as one argument rather than seven islands. */
  --space-section: clamp(3.5rem, 2.5rem + 3.5vw, 6.5rem);
  --space-section-sm: clamp(2.5rem, 2rem + 2vw, 4rem);

  /* -- Layout --------------------------------------------------------------- */

  --container-max: 88rem;
  --container-pad: clamp(1.5rem, 4vw + 0.5rem, 5rem);
  --grid-columns: 12;
  --grid-gutter: clamp(1.25rem, 2.5vw, 2.5rem);

  /* -- Radius (none — squared corners throughout) --------------------------- */

  --radius-none: 0;
  --radius-sm: 1px;

  /* -- Border ----------------------------------------------------------------*/

  --border-hairline: 1px solid var(--color-border);
  --border-hairline-dark: 1px solid var(--color-border-on-dark);

  /* -- Shadow (detail panel only) ------------------------------------------- */

  --shadow-panel: 0 32px 80px -32px rgba(8, 12, 12, 0.45);

  /* -- Motion ----------------------------------------------------------------
     Slower and fewer than before. The reveal easing is a long tail with no
     overshoot: things arrive and settle, they do not spring. */

  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;
  --duration-image: 900ms;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* long settle */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Entry lift is deliberately small. A large travel distance is what makes
     scroll animation read as a template effect. */
  --reveal-distance: 10px;
  --reveal-stagger: 70ms;

  /* -- Z-index ---------------------------------------------------------------*/

  --z-header: 100;
  --z-panel: 200;
  --z-skip-link: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-image: 1ms;
    --reveal-distance: 0px;
    --reveal-stagger: 0ms;
  }
}