/* ============================================================
   COMEFLORES — Colors & Type foundations
   Alta gastronomía botánica · Florifagia · Vivero LMV
   Link this file + the Google Fonts import below in any artifact.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

/* Brand script — self-hosted (uploaded by the brand) */
@font-face {
  font-family: 'Lust Script';
  src: url('fonts/lust-script-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- CORE BRAND PALETTE ---------- */
  --cf-orange:      #F28C00;  /* PRIMARY — logo badge, accents, CTAs            */
  --cf-orange-deep: #D97606;  /* pressed / darker orange                        */
  --cf-navy:        #082046;  /* deep brand blue — primary ink on light         */
  --cf-dark:        #041024;  /* near-black ink, dramatic backgrounds           */
  --cf-light:       #F8F8F5;  /* cream paper — default page background          */
  --cf-gray:        #E6E6E3;  /* warm gray — dividers, hairlines, fills         */

  /* ---------- BOTANICAL ACCENTS (per-product) ---------- */
  /* The poster system tints each piece to its subject's natural colour.        */
  --cf-magenta:     #9C2A86;  /* Alhelí / Matthiola                             */
  --cf-magenta-soft:#E7C5DE;  /* soft petal tint                                */
  --cf-terracotta:  #C0341A;  /* Marigold / Cempasúchil deep                    */
  --cf-red:         #C8102E;  /* "Lechugas" script red                          */
  --cf-yellow:      #E8A21D;  /* warm gold accent                               */
  --cf-green:       #1E7A3D;  /* Crunchita / leaf green                         */
  --cf-green-bright:#6CC04A;  /* "Hojas" bright script green                    */

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --bg:        var(--cf-light);
  --bg-ink:    var(--cf-navy);   /* dramatic / museum sections                  */
  --bg-black:  #0A0A0A;          /* gallery black for hero product shots        */
  --surface:   #FFFFFF;          /* cards, frosted nav                          */
  --fg1:       var(--cf-dark);   /* primary text                                */
  --fg2:       #3A4257;          /* secondary text                              */
  --fg3:       #7A8194;          /* muted / captions                            */
  --fg-on-dark:#F8F8F5;          /* text on navy/black                          */
  --fg-on-dark-2: rgba(248,248,245,0.72);
  --accent:    var(--cf-orange);
  --line:      var(--cf-gray);   /* hairline borders                            */
  --line-strong: rgba(8,32,70,0.14);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Playfair Display', 'Times New Roman', serif; /* high-contrast editorial display */
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif; /* UI + body + product labels */
  --font-script:  'Lust Script', 'Snell Roundhand', cursive;  /* elegant brand script — poster titles & category words */

  /* ---------- RADII ---------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 40px;     /* editorial cards / framed photos */
  --r-2xl: 80px;    /* hero panels, asymmetric corners */
  --r-pill: 999px;  /* nav, buttons, badges            */

  /* ---------- SHADOWS ---------- */
  --shadow-sm:  0 1px 2px rgba(4,16,36,0.06);
  --shadow-md:  0 8px 24px rgba(4,16,36,0.08);
  --shadow-lg:  0 18px 40px rgba(4,16,36,0.12);
  --shadow-xl:  0 30px 60px rgba(4,16,36,0.18);
  --shadow-photo: 0 20px 30px rgba(0,0,0,0.05); /* soft float under cutout photos */

  /* ---------- SPACING (8pt base) ---------- */
  --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;

  /* ---------- MOTION ---------- */
  --ease-butter: cubic-bezier(0.25, 1, 0.5, 1);  /* expo-out feel, brand standard */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-med:  0.5s;
  --dur-slow: 1.2s;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.cf-eyebrow {           /* small caps label above headings, e.g. botanical name */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cf-orange);
}

.cf-display {           /* hero / poster display */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--cf-navy);
}
.cf-display em, .cf-display .italic { font-style: italic; }

.cf-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--cf-navy);
}
.cf-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--cf-navy);
}
.cf-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.15;
  color: var(--cf-navy);
}
.cf-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--cf-navy);
}

.cf-lead {              /* intro paragraph */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.55;
  color: var(--fg2);
}
.cf-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg2);
}
.cf-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg3);
}
.cf-caption {           /* tiny tracked legal / credit text, often rotated */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg3);
}
.cf-script {            /* elegant brand script, e.g. "Suculenta Samancito" */
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.8rem, 6.5vw, 5.5rem);
  line-height: 0.95;
  color: var(--cf-green);
}

/* Brand wordmark helper: alternating orange/navy serif caps */
.cf-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cf-navy);
}
.cf-wordmark .o { color: var(--cf-orange); }

/* Vertically-stacked poster letters (signature device) */
.cf-vertical {
  font-family: var(--font-display);
  font-weight: 700;
  writing-mode: initial;
  display: flex;
  flex-direction: column;
  line-height: 0.92;
}

::selection { background: var(--cf-orange); color: #fff; }