/* =========================================================================
   ARKAS DIGITAL - DESIGN TOKENS
   =========================================================================

   THIS IS THE ONLY FILE YOU NEED TO EDIT TO CHANGE THE BRAND.

   Every colour, font, size and spacing value on the site is defined here
   once and referenced everywhere else. Changing a brand colour is a
   one-line edit in this file and it updates across the entire site.

   Edit at: Appearance > Theme File Editor > Arkas Digital > assets/css/tokens.css
   ========================================================================= */

:root {

  /* -----------------------------------------------------------------------
     COLOUR
     Yellow is an accent only. It must never become a background wash.
     Rule: yellow covers under 10% of any viewport.
     ----------------------------------------------------------------------- */

  --ark-yellow:       #FFD54F;  /* primary accent - CTAs, rules, icon fills */
  --ark-yellow-deep:  #E6B62E;  /* hover states, borders */
  --ark-yellow-pale:  #FFF6DC;  /* section tint, used very sparingly */
  --ark-ink:          #12100C;  /* warm near-black - primary text, dark sections */
  --ark-charcoal:     #2A2721;  /* secondary dark surfaces, cards on dark */
  --ark-slate:        #6B665C;  /* muted body text, labels, captions */
  --ark-bone:         #FAF8F3;  /* page background - warm off-white, not #FFF */
  --ark-white:        #FFFFFF;  /* elevated cards only */
  --ark-line:         #E4DFD4;  /* hairline borders and dividers */

  /* Derived colours for use on dark sections */
  --ark-line-dark:    #3A362E;  /* hairline on ink/charcoal backgrounds */
  --ark-slate-light:  #A9A296;  /* muted text on dark backgrounds */

  /* Focus ring - must stay visible against both light and dark surfaces */
  --ark-focus:        #2563EB;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY
     Two families, both self-hosted from this domain. See assets/css/fonts.css
     ----------------------------------------------------------------------- */

  --ark-font-heading: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --ark-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --ark-weight-body:    400;
  --ark-weight-medium:  500;
  --ark-weight-heading: 400;
  --ark-weight-heading-strong: 600;

  /* Fluid type scale. clamp() means these resize smoothly between mobile
     and desktop without media queries. */
  --ark-size-h1:    clamp(2.5rem, 5vw, 4.5rem);
  --ark-size-h2:    clamp(1.9rem, 3.5vw, 3rem);
  --ark-size-h3:    clamp(1.3rem, 2vw, 1.75rem);
  --ark-size-h4:    clamp(1.125rem, 1.4vw, 1.3rem);
  --ark-size-body:  1.0625rem;
  --ark-size-lead:  clamp(1.1875rem, 1.6vw, 1.375rem);  /* answer paragraphs */
  --ark-size-small: 0.9375rem;
  --ark-size-label: 0.8125rem;  /* eyebrows, captions, meta */

  --ark-lh-h1:    1.05;
  --ark-lh-h2:    1.15;
  --ark-lh-h3:    1.25;
  --ark-lh-body:  1.7;

  --ark-ls-h1:    -0.02em;
  --ark-ls-h2:    -0.015em;
  --ark-ls-label:  0.08em;  /* eyebrow tracking */

  /* Optical sizing for the variable heading face */
  --ark-opsz-display: 'opsz' 96;
  --ark-opsz-text:    'opsz' 14;

  /* -----------------------------------------------------------------------
     LAYOUT AND SPACING
     Space is the luxury signal. Do not tighten these to fit more in.
     ----------------------------------------------------------------------- */

  --ark-max-width:     1200px;  /* max content width */
  --ark-max-measure:   68ch;    /* text blocks capped at 68 characters */
  --ark-gutter:        24px;    /* page side padding, mobile */
  --ark-gutter-lg:     40px;    /* page side padding, desktop */

  --ark-section-y:     96px;    /* section vertical padding, desktop */
  --ark-section-y-sm:  56px;    /* section vertical padding, mobile */

  /* Spacing scale */
  --ark-space-1:  4px;
  --ark-space-2:  8px;
  --ark-space-3:  12px;
  --ark-space-4:  16px;
  --ark-space-5:  24px;
  --ark-space-6:  32px;
  --ark-space-7:  48px;
  --ark-space-8:  64px;
  --ark-space-9:  96px;
  --ark-space-10: 128px;

  /* Border radius: 4px maximum. Rounded corners read as consumer SaaS. */
  --ark-radius:       4px;
  --ark-radius-small: 2px;

  --ark-border:       1px solid var(--ark-line);
  --ark-border-dark:  1px solid var(--ark-line-dark);

  /* -----------------------------------------------------------------------
     MOTION
     Subtle only. No parallax, no autoplay video, no carousels.
     All motion is disabled automatically under prefers-reduced-motion.
     ----------------------------------------------------------------------- */

  --ark-duration:  300ms;
  --ark-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);

  /* -----------------------------------------------------------------------
     HEADER
     ----------------------------------------------------------------------- */

  --ark-header-height: 76px;
  --ark-logo-height:   40px;
}