/* ============================================================
   PRETTY SUITE — Colors & Type Foundation
   Premium painting · Coffs Coast, NSW
   Create · Paint · Decorate
   ============================================================ */

/* ---- Fonts ----
   Brand guide specifies:
     • Headings / display  →  ARIAL BLACK  (heavy grotesque, often italic in logo)
     • Body / UI           →  BARLOW (Medium)
   No font files were supplied with the brand suite, so:
     • Barlow is loaded from Google Fonts (exact match).
     • Arial Black is used as a web-safe system font (already installed on
       virtually all machines). Substitute "Archivo Black" from Google Fonts
       if a hosted fallback is required.  ── FLAGGED to client.
*/
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,500;1,700&family=Archivo+Black&display=swap');

:root {
  /* ---------- BRAND COLOR PALETTE (from Brand Usage Guide) ---------- */
  --ps-deep-green:      #014936;   /* PRIMARY  · R1 G73 B54   · C90 M44 Y78 K47 */
  --ps-lime:            #B1D462;   /* LIME     · R177 G212 B98 · C35 M0 Y79 K0  */
  --ps-navy:            #202B3A;   /* NAVY     · R32 G43 B58   · C85 M73 Y52 K56 */
  --ps-light-navy:      #475266;   /* LIGHT NAVY· R71 G82 B102 · C76 M62 Y42 K24*/
  --ps-green-tint:      #E6EDEB;   /* DEEP GREEN TINT · 10% deep green on white */

  /* Practical extensions of the palette (derived, harmonious) */
  --ps-deep-green-700:  #013426;   /* pressed / shadow green   */
  --ps-deep-green-600:  #024030;
  --ps-deep-green-500:  #014936;   /* = brand deep green       */
  --ps-deep-green-hover:#02543f;   /* hover lift on green       */
  --ps-lime-600:        #9DC247;   /* pressed / darker lime    */
  --ps-lime-300:        #CBE293;   /* soft lime fill           */
  --ps-lime-tint:       #F2F8E4;   /* 12% lime wash            */
  --ps-navy-tint:       #EDEFF2;   /* navy at low tint         */

  /* ---------- NEUTRALS (warm-cool grey ladder tuned to navy) ---------- */
  --ps-white:           #FFFFFF;
  --ps-off-white:       #F7F8F6;   /* page canvas (faint green-grey) */
  --ps-paper:           #FBFBF9;
  --ps-grey-100:        #EEF0EE;
  --ps-grey-200:        #DDE1DE;
  --ps-grey-300:        #C4CAC6;
  --ps-grey-400:        #9AA1A0;
  --ps-grey-500:        #6E7674;
  --ps-grey-600:        #4D5654;
  --ps-grey-900:        #161E1B;

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg-1:    var(--ps-navy);        /* primary text            */
  --fg-2:    var(--ps-light-navy);  /* secondary text          */
  --fg-3:    var(--ps-grey-500);    /* muted / captions        */
  --fg-on-green: #FFFFFF;           /* text on deep green       */
  --fg-on-lime:  var(--ps-deep-green); /* text on lime          */
  --fg-brand:    var(--ps-deep-green); /* brand-coloured text   */

  /* ---------- SEMANTIC BACKGROUND ---------- */
  --bg-canvas:  var(--ps-off-white);
  --bg-surface: var(--ps-white);
  --bg-sunken:  var(--ps-grey-100);
  --bg-brand:   var(--ps-deep-green);
  --bg-brand-soft: var(--ps-green-tint);
  --bg-accent:  var(--ps-lime);
  --bg-dark:    var(--ps-navy);

  /* ---------- BORDERS ---------- */
  --border-1:   var(--ps-grey-200);
  --border-2:   var(--ps-grey-300);
  --border-brand: var(--ps-deep-green);
  --border-strong: var(--ps-navy);

  /* ---------- STATUS (derived to sit beside the palette) ---------- */
  --ok:      #2E7D55;
  --warning: #C98A2B;
  --error:   #B23A3A;
  --info:    var(--ps-light-navy);

  /* ============================================================
     TYPE SYSTEM
     ============================================================ */
  --font-display: 'Arial Black', 'Archivo Black', 'Arial', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Weights */
  --fw-body:    400;
  --fw-medium:  500;   /* brand body weight */
  --fw-semi:    600;
  --fw-bold:    700;

  /* Fluid type scale (1.250 major-third), display is tight & punchy */
  --text-display: 4.5rem;   /* 72px hero          */
  --text-h1:      3rem;     /* 48px               */
  --text-h2:      2.25rem;  /* 36px               */
  --text-h3:      1.625rem; /* 26px               */
  --text-h4:      1.25rem;  /* 20px               */
  --text-lead:    1.25rem;  /* 20px intro copy    */
  --text-body:    1rem;     /* 16px               */
  --text-sm:      0.875rem; /* 14px               */
  --text-xs:      0.75rem;  /* 12px labels        */
  --text-eyebrow: 0.8125rem;/* 13px overline      */

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* eyebrows / tagline (CREATE · PAINT · DECORATE) */
  --tracking-wider:  0.16em;

  /* ============================================================
     SPACING · RADII · SHADOW · ELEVATION
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows — soft, cool, low-spread (premium, not heavy) */
  --shadow-xs: 0 1px 2px rgba(32, 43, 58, 0.06);
  --shadow-sm: 0 2px 8px rgba(32, 43, 58, 0.08);
  --shadow-md: 0 8px 24px rgba(32, 43, 58, 0.10);
  --shadow-lg: 0 18px 48px rgba(32, 43, 58, 0.14);
  --shadow-green: 0 12px 30px rgba(1, 73, 54, 0.22);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS  (opt in via .ps-prose or use vars)
   ============================================================ */
.ps-display, h1.ps, .ps-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: none;
}
.ps-display { font-size: var(--text-display); }
.ps-h1 { font-size: var(--text-h1); }

.ps-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ps-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ps-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--text-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ps-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-brand);
}
.ps-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.ps-body, body.ps {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.ps-sm  { font-size: var(--text-sm); }
.ps-xs  { font-size: var(--text-xs); }

/* Tagline lockup style — matches CREATE · PAINT · DECORATE */
.ps-tagline {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-brand);
}