/* ==========================================================================
   Moorunga Angus - Design Tokens
   Single source of truth: colour, type, spacing, geometry, motion.
   Palette is restrained by brand: black / white / signal-green / grey.
   ========================================================================== */

:root {
  /* --- Brand colour ----------------------------------------------------- */
  --c-ink:        #222222; /* primary dark - text & dark sections          */
  --c-black:      #111111; /* deepest - footer, hero scrims                 */
  --c-green:      #70d44b; /* signal green - the ONLY green used anywhere    */
  --c-green-deep: #70d44b; /* unified to brand green (no other shade)        */
  --c-green-text: #70d44b; /* unified to brand green (no other shade)        */
  --c-green-ink:  #70d44b; /* unified to brand green (no other shade)        */
  --c-white:      #ffffff;

  /* Greys (brand light-grey is #cfd2d3 / Pantone 427 C) */
  --c-grey-50:  #f6f7f7;
  --c-grey-100: #eceef0;
  --c-grey-200: #dfe1e3;
  --c-grey-300: #cfd2d3; /* brand "Light Grey" */
  --c-grey-400: #9aa1a8;
  --c-grey-500: #6b7177;
  --c-grey-550: #565c61; /* AA-safe muted text on light surfaces            */
  --c-grey-600: #474c51;

  /* Semantic */
  --c-bg:           var(--c-white);
  --c-bg-alt:       var(--c-grey-50);
  --c-bg-dark:      var(--c-ink);
  --c-bg-darker:    var(--c-black);
  --c-text:         var(--c-ink);
  --c-text-muted:   var(--c-grey-550); /* darkened for ≥4.5:1 on grey-50    */
  --c-text-invert:  var(--c-white);
  --c-border:       var(--c-grey-200);
  --c-border-dark:  rgba(255,255,255,.14);
  --c-accent:       var(--c-green);

  /* --- Typography ------------------------------------------------------- */
  /* Brand fonts (mini brand guide): General Sans.
     Font 1 - General Sans Bold (700) for headings & the wordmark voice.
     Font 2 - General Sans Medium (500) for body.
     One family throughout; weight does the work. Sentence case, not condensed. */
  --font-display: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* General Sans weight ramp - hierarchy comes from weight, not from kickers. */
  --weight-body:     500; /* Medium - body                                   */
  --weight-medium:   500; /* Medium - leads                                  */
  --weight-semibold: 600; /* Semibold - sub-heads, eyebrows, card titles     */
  --weight-heading:  700; /* Bold - display                                  */

  /* Fluid type scale (clamp: min, preferred vw, max).
     Display ceilings kept ≤ ~5.5rem so the page is designing, not shouting. */
  --fs-300: clamp(.85rem, .82rem + .14vw, .9375rem);   /* fine print 15px   */
  --fs-400: clamp(1.0625rem, 1rem + .25vw, 1.125rem);  /* body - 18px       */
  --fs-450: clamp(1.15rem, 1.05rem + .35vw, 1.3rem);   /* large body        */
  --fs-500: clamp(1.2rem, 1rem + .7vw, 1.6rem);        /* lead              */
  --fs-600: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);      /* h4 / sub          */
  --fs-700: clamp(1.7rem, 1.25rem + 1.6vw, 2.6rem);    /* h3                */
  --fs-800: clamp(2.15rem, 1.5rem + 2.9vw, 3.8rem);    /* h2 / section      */
  --fs-900: clamp(2.6rem, 1.7rem + 4.4vw, 5.25rem);    /* hero display      */

  --lh-tight:  1.04;
  --lh-snug:   1.14;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --tracking-display: -.03em;   /* tight, confident grotesque display       */
  --tracking-tight:   -.02em;   /* sub-display / leads                       */
  --tracking-wide:    .14em;     /* the "ANGUS" tracked-out treatment        */
  --tracking-eyebrow: .18em;

  /* --- Spacing (8px base) ----------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* Section vertical rhythm, fluid. Bottom is optically heavier than top so
     sections settle rather than float. */
  --section-y:    clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --section-pt:   var(--section-y);
  --section-pb:   clamp(4rem, 2.4rem + 7vw, 9rem);
  --section-y-sm: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

  /* --- Layout ----------------------------------------------------------- */
  /* Generous content width so large/ultrawide screens are used well. Text
     columns inside stay readable via their own max-widths (--measure etc.). */
  --container:      1800px;
  --container-wide: 1800px;
  --container-text: 720px;     /* readable measure for long copy           */
  --measure:        80ch;      /* hard cap on prose line length            */
  --gutter:         clamp(1.25rem, .8rem + 2vw, 3rem);
  --header-h:       96px;

  /* --- Geometry: the chevron / peak system ------------------------------ */
  /* Angle (from logo peaks) used for diagonal section cuts & clipped frames */
  --chevron-angle: 7deg;
  --diagonal-h:    clamp(40px, 7vw, 110px);  /* height of an angled cut     */
  --clip-notch:    clamp(20px, 3vw, 48px);   /* corner notch on image frames*/

  /* Reusable clip-paths */
  --clip-frame-tl: polygon(var(--clip-notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--clip-notch));
  --clip-frame-br: polygon(0 0, 100% 0, 100% calc(100% - var(--clip-notch)), calc(100% - var(--clip-notch)) 100%, 0 100%);

  /* --- Radius / elevation ----------------------------------------------- */
  --radius-sm: 6px;
  --radius:    14px;   /* the rounded-card radius used across the deck       */
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(17,17,17,.08), 0 1px 2px rgba(17,17,17,.06);
  --shadow:    0 12px 30px -12px rgba(17,17,17,.22);
  --shadow-lg: 0 30px 60px -20px rgba(17,17,17,.35);

  /* --- Motion ----------------------------------------------------------- */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);   /* expo-out - settles softly */
  --ease-press:  cubic-bezier(.4, 0, .2, 1);    /* tap/press feedback        */
  --dur-fast:  160ms;
  --dur:       320ms;
  --dur-slow:  600ms;

  /* --- Z-index ---------------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}