/*
Theme Name:  The GAROE Group
Theme URI:   https://garoegroup.com
Author:      Automated Europe
Author URI:  https://automated.wales
Description: Custom theme for The GAROE Group — Legacy Programme and Academy Programme.
Version:     1.0.0
License:     Private
Text Domain: garoe
*/

/* ==========================================================================
   DESIGN TOKENS
   All brand values live here as CSS custom properties.
   Every template and component references these — never hard-code values.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Colour: Core palette
     -------------------------------------------------------------------------- */
  --color-carbon:       #0a0a0a;   /* Primary background */
  --color-carbon-2:     #161513;   /* Secondary surface / cards */
  --color-carbon-3:     #1f1e1b;   /* Elevated surface */
  --color-charcoal:     #2a2a2a;   /* Subtle surface, borders */

  --color-white:        #ffffff;   /* Primary text on dark */
  --color-paper:        #f6f4ef;   /* Off-white — light surface background */
  --color-paper-2:      #efece3;   /* Light surface secondary */
  --color-paper-text:   #f4f1ea;   /* Body text on dark surfaces */

  --color-ink:          #0e0e0e;   /* Primary text on light */
  --color-ink-soft:     #33322f;   /* Secondary text on light */
  --color-muted:        #74726b;   /* Tertiary / metadata text */

  --color-gold:         #c8a96e;   /* Primary accent — to be confirmed against final brand */
  --color-gold-light:   #d9be8a;   /* Hover / highlight state */
  --color-gold-dark:    #a8893e;   /* Active / pressed state */
  --color-gold-on-light:#7a5c1e;   /* Gold used on light backgrounds */
  --color-gold-fill:    #f5edda;   /* Very light gold tint for light surfaces */

  --color-copper-dark:  #8a5226;   /* Darker copper — card/section outlines on dark surfaces (e.g. Find Your Academy) */

  --color-line-dark:    rgba(200, 169, 110, 0.2);  /* Dividers on dark surfaces */
  --color-line-light:   #ddd7c9;                   /* Dividers on light surfaces */

  /* --------------------------------------------------------------------------
     Colour: Milestone tier system
     -------------------------------------------------------------------------- */
  --tier-copper:        #b87333;
  --tier-copper-text:   rgba(0, 0, 0, 0.75);
  --tier-silver:        #9a9a9a;
  --tier-silver-text:   rgba(0, 0, 0, 0.65);
  --tier-gold:          #c8a847;
  --tier-gold-text:     rgba(0, 0, 0, 0.7);
  --tier-black:         #2a2a2a;
  --tier-black-border:  #444444;
  --tier-black-text:    rgba(255, 255, 255, 0.75);

  /* --------------------------------------------------------------------------
     Colour: Semantic / UI states
     -------------------------------------------------------------------------- */
  --color-success:      #2d7a3a;
  --color-success-text: #4caf66;
  --color-error:        #7a2d2d;
  --color-error-text:   #c75454;
  --color-focus:        #c8a96e;   /* Focus ring — matches gold */

  /* --------------------------------------------------------------------------
     Typography: Families
     -------------------------------------------------------------------------- */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* --------------------------------------------------------------------------
     Typography: Scale
     Based on a modular scale. Display sizes for headings, body scale for copy.
     -------------------------------------------------------------------------- */
  --text-xs:    0.6875rem;   /* 11px — fine print, legal */
  --text-sm:    0.75rem;     /* 12px — captions, metadata */
  --text-base:  0.9375rem;   /* 15px — body copy */
  --text-md:    1.0625rem;   /* 17px — lead paragraph */
  --text-lg:    1.25rem;     /* 20px — subheadings */
  --text-xl:    1.5rem;      /* 24px — section headings */
  --text-2xl:   2rem;        /* 32px — page headings */
  --text-3xl:   2.75rem;     /* 44px — display / hero */
  --text-4xl:   3.75rem;     /* 60px — large hero */
  --text-5xl:   5rem;        /* 80px — maximum display */

  /* --------------------------------------------------------------------------
     Typography: Weights
     -------------------------------------------------------------------------- */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* --------------------------------------------------------------------------
     Typography: Line heights
     -------------------------------------------------------------------------- */
  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.62;
  --leading-relaxed:  1.75;

  /* --------------------------------------------------------------------------
     Typography: Letter spacing
     -------------------------------------------------------------------------- */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.22em;

  /* --------------------------------------------------------------------------
     Spacing scale
     All spacing — margins, padding, gaps — drawn from this scale.
     -------------------------------------------------------------------------- */
  --space-1:    0.25rem;    /*  4px */
  --space-2:    0.5rem;     /*  8px */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-8:    2rem;       /* 32px */
  --space-10:   2.5rem;     /* 40px */
  --space-12:   3rem;       /* 48px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-32:   8rem;       /* 128px */

  /* --------------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------------- */
  --container-max:      1120px;
  --container-narrow:   760px;
  --container-wide:     1320px;
  --container-padding:  var(--space-8);   /* Horizontal padding at default breakpoint */

  /* --------------------------------------------------------------------------
     Borders and radii
     -------------------------------------------------------------------------- */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-full:  9999px;

  --border-thin:   1px solid var(--color-line-dark);
  --border-light:  1px solid var(--color-line-light);

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 0 3px rgba(200, 169, 110, 0.35);

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

  /* --------------------------------------------------------------------------
     Z-index scale
     -------------------------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-overlay:  50;
  --z-modal:   100;
  --z-nav:     200;
  --z-toast:   300;
}


/* ==========================================================================
   BASE RESET AND DEFAULTS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background-color: var(--color-carbon);
  color: var(--color-paper-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Exception: images inside a designated full-bleed photo container should
   fill that container exactly, ignoring the max-width/height:auto reset
   above. Used for hero photography and product/gallery photo zones across
   the site (Legacy, Academy, Swansea pages) where a fixed-aspect frame is
   the deliberate design, not a content image that should keep its own
   intrinsic ratio. */
.photo-fill {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
}

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-gold-light);
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: var(--font-body);
  font-size: var(--text-base);
}