/* ============================================================
   OROPEZAS.COM — Colors & Type Foundations
   Source of truth: pulled from Prensa_2/styles.css + per-page inline styles.

   Aesthetic: editorial newspaper. Monochrome black-on-white with one
   accent red. System fonts only — no webfonts in production today.
   ============================================================ */

:root {
    /* ---------- COLOR SCALE — Neutrals ---------- */
    /* Used everywhere. The whole product is a black/white grayscale system. */
    --op-black:        #000000;   /* True black — used for headlines, nav, buttons */
    --op-black-soft:   #0a0a0a;   /* Near-black — body text in newer styles.css */
    --op-gray-900:     #1a1a1a;   /* Dark gray — hover/pressed states on .black bgs */
    --op-gray-700:     #222222;   /* Article body copy */
    --op-gray-600:     #555555;   /* Captions, secondary nav links */
    --op-gray-500:     #666666;   /* Default gray text token (--gray-text) */
    --op-gray-400:     #888888;   /* Tertiary text, disabled */
    --op-gray-300:     #999999;   /* Date/byline meta */
    --op-gray-200:     #cccccc;   /* Hairlines on dark fills, large icons */
    --op-gray-150:     #e0e0e0;   /* Default border (--gray-border in some files) */
    --op-gray-100:     #e5e5e5;   /* Border in newer styles.css */
    --op-gray-75:      #e8e8e8;   /* Card borders (account, foros) */
    --op-gray-50:      #f0f0f0;   /* Avatar placeholder, hover bg */
    --op-gray-25:      #f5f5f5;   /* --gray-light — page tint, hover bg */
    --op-gray-10:      #f9f9f9;   /* foros + account page bg */
    --op-gray-5:       #fafafa;   /* Chat panel bg */
    --op-white:        #ffffff;

    /* ---------- COLOR SCALE — Accents ---------- */
    /* Red is the ONLY accent used across the editorial UI. */
    --op-red:          #b00020;   /* Article category underline (canonical) */
    --op-red-strong:   #c00000;   /* Error states, logout button */
    --op-red-burgundy: #800020;   /* Scrolling alert ticker */
    --op-red-canada:   #c8102e;   /* Kelowna 🇨🇦 pill (Canadian flag red) */
    --op-red-bright:   #ff3b3b;   /* Reserved — declared in index.html, unused */

    /* ---------- COLOR SCALE — Forum category tags ---------- */
    /* The single place where color is allowed beyond red. Pastel chips. */
    --op-tag-noticias-bg:   #fff0f0;  --op-tag-noticias-fg:   #cc0000;
    --op-tag-deportes-bg:   #f0f8ff;  --op-tag-deportes-fg:   #0066cc;
    --op-tag-politica-bg:   #fff8e6;  --op-tag-politica-fg:   #996600;
    --op-tag-comunidad-bg:  #f0fff4;  --op-tag-comunidad-fg:  #007733;
    --op-tag-cultura-bg:    #f8f0ff;  --op-tag-cultura-fg:    #6600cc;

    /* "Verified" badge — Twitter-blue tonality */
    --op-blue-verified:     #1d9bf0;
    --op-blue-verified-bg:  #e8f5fe;
    --op-link-blue:         #007aff;  /* Used in chat markdown links */

    /* ---------- SEMANTIC COLOR TOKENS ---------- */
    --op-fg:               var(--op-black);
    --op-fg-muted:         var(--op-gray-500);
    --op-fg-faint:         var(--op-gray-300);
    --op-fg-inverse:       var(--op-white);

    --op-bg:               var(--op-white);
    --op-bg-elevated:      var(--op-white);     /* Cards on tinted pages */
    --op-bg-subtle:        var(--op-gray-25);   /* Section tints */
    --op-bg-page-tinted:   var(--op-gray-10);   /* Account/foros pages */
    --op-bg-inverse:       var(--op-black);

    --op-border:           var(--op-gray-150);  /* Default hairline */
    --op-border-card:      var(--op-gray-75);   /* Card outlines */
    --op-border-strong:    var(--op-black);     /* Underline-on-hover, focus */

    --op-accent:           var(--op-red);
    --op-danger:           var(--op-red-strong);

    /* ---------- TYPE — Font stacks ---------- */
    /* Production uses ONLY the native system stack. No webfonts shipped today.
       If you need to download/substitute, Inter / SF Pro / Helvetica Now are
       the closest matches. */
    --op-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    'Helvetica Neue', Roboto, sans-serif;
    --op-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
                    Consolas, monospace;
    --op-font-body: var(--op-font-sans);
    --op-font-display: var(--op-font-sans); /* Same family — distinction via weight + tracking */

    /* ---------- TYPE — Weights ---------- */
    --op-w-regular:  400;
    --op-w-medium:   500;
    --op-w-semibold: 600;
    --op-w-bold:     700;
    --op-w-extrabold:800;
    --op-w-black:    900;   /* Headlines + logo wordmark */

    /* ---------- TYPE — Sizes (rem-based, root = 16px) ---------- */
    --op-text-xxs:   0.72rem;   /* 11.5 — micro meta */
    --op-text-xs:    0.75rem;   /* 12   — eyebrow / meta */
    --op-text-sm:    0.85rem;   /* 13.6 — nav links, captions */
    --op-text-base:  1rem;      /* 16   — body */
    --op-text-md:    1.1rem;    /* 17.6 — featured subtitle, card title */
    --op-text-lg:    1.2rem;    /* 19   — article excerpt */
    --op-text-xl:    1.5rem;    /* 24   — section subhead */
    --op-text-2xl:   2rem;      /* 32   — page title (h1) */
    --op-text-3xl:   2.2rem;    /* 35   — featured headline */
    --op-text-display: clamp(2.2rem, 7vw, 4rem); /* Article hero — fluid */

    /* ---------- TYPE — Line heights ---------- */
    --op-lh-tight:   1.05;   /* Display headlines */
    --op-lh-snug:    1.2;    /* H1 / featured */
    --op-lh-normal:  1.4;    /* Card titles */
    --op-lh-relaxed: 1.6;    /* Body */
    --op-lh-loose:   1.95;   /* Long-form article body */

    /* ---------- TYPE — Letter spacing ---------- */
    --op-tracking-tighter: -0.03em;  /* Article display title */
    --op-tracking-tight:   -0.02em;  /* Page titles */
    --op-tracking-snug:    -0.01em;  /* Card titles */
    --op-tracking-normal:  0;
    --op-tracking-wide:    0.05em;   /* Nav links, button labels */
    --op-tracking-wider:   0.1em;    /* Section eyebrows, tagline */
    --op-tracking-widest:  0.15em;   /* Wordmark, "OROPEZAS" */

    /* ---------- SPACING (matches rem rhythm in styles.css) ---------- */
    --op-space-1:  0.25rem;   /* 4px  */
    --op-space-2:  0.5rem;    /* 8px  */
    --op-space-3:  0.75rem;   /* 12px */
    --op-space-4:  1rem;      /* 16px */
    --op-space-5:  1.25rem;   /* 20px */
    --op-space-6:  1.5rem;    /* 24px */
    --op-space-8:  2rem;      /* 32px */
    --op-space-10: 2.5rem;    /* 40px */
    --op-space-12: 3rem;      /* 48px */
    --op-space-16: 4rem;      /* 64px */

    /* ---------- RADII ---------- */
    /* Newspaper-flat by default. Soft only for chat / modals / pills. */
    --op-radius-none:  0;
    --op-radius-xs:    2px;   /* News cards, default buttons */
    --op-radius-sm:    4px;   /* Kelowna pill, .read-more */
    --op-radius-md:    6px;   /* Featured image */
    --op-radius-lg:    10px;  /* Form inputs */
    --op-radius-xl:    12px;  /* Stat cards, dropdowns */
    --op-radius-2xl:   14px;  /* Article hero image, forum cards */
    --op-radius-3xl:   16px;  /* Account profile card, chat window */
    --op-radius-4xl:   20px;  /* Auth modal, foros modal */
    --op-radius-pill:  99px;  /* Buttons (account, foros, auth) */
    --op-radius-circle:50%;

    /* ---------- SHADOWS ---------- */
    /* Editorial: shadows are restrained. Used on dropdowns, modals, hover lift. */
    --op-shadow-hairline: 0 2px 0 rgba(0,0,0,0.02);     /* Header rest state */
    --op-shadow-header:   0 4px 12px rgba(0,0,0,0.08);  /* Header on scroll */
    --op-shadow-card:     0 4px 16px rgba(0,0,0,0.07);  /* Forum card hover */
    --op-shadow-lift:     0 8px 16px rgba(0,0,0,0.15);  /* Button hover */
    --op-shadow-pop:      0 12px 24px rgba(0,0,0,0.12); /* Contact card hover */
    --op-shadow-menu:     0 8px 24px rgba(0,0,0,0.12);  /* User dropdown */
    --op-shadow-modal:    0 20px 60px rgba(0,0,0,0.20); /* Auth modal */
    --op-shadow-chat:     0 20px 50px rgba(0,0,0,0.30); /* Chat window */

    /* ---------- MOTION ---------- */
    --op-ease-standard:   cubic-bezier(0.25, 0.46, 0.45, 0.94); /* In-out, conservative */
    --op-ease-springy:    cubic-bezier(0.34, 1.56, 0.64, 1);    /* Slight overshoot on buttons */
    --op-dur-fast:        0.15s;  /* Hover swaps */
    --op-dur-normal:      0.3s;   /* Default transition */
    --op-dur-slow:        0.5s;   /* Image zoom-on-hover */
    --op-dur-entry:       0.6s;   /* fadeInUp on load */

    /* ---------- LAYOUT ---------- */
    --op-container:       1100px;  /* Site max-width */
    --op-container-read:  860px;   /* Article body max-width */
    --op-container-prose: 820px;   /* Article container padding-box */

    /* ---------- Z-INDEX ---------- */
    --op-z-header:  1000;
    --op-z-menu:    2000;
    --op-z-modal:   9999;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — defaults that match production
   Wrap consumers in `.op` to opt in without leaking globals.
   ============================================================ */

.op,
.op * { box-sizing: border-box; }

.op {
    font-family: var(--op-font-body);
    color: var(--op-fg);
    background: var(--op-bg);
    line-height: var(--op-lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.op h1, .op .h1 {
    font-size: var(--op-text-3xl);
    font-weight: var(--op-w-black);
    line-height: var(--op-lh-snug);
    letter-spacing: var(--op-tracking-tight);
    color: var(--op-fg);
    margin: 0 0 var(--op-space-4);
}

.op h2, .op .h2 {
    font-size: var(--op-text-xl);
    font-weight: var(--op-w-bold);
    line-height: var(--op-lh-normal);
    margin: 0 0 var(--op-space-4);
}

.op h3, .op .h3 {
    font-size: var(--op-text-md);
    font-weight: var(--op-w-bold);
    line-height: var(--op-lh-normal);
    letter-spacing: var(--op-tracking-snug);
    margin: 0 0 var(--op-space-2);
}

.op .display {
    font-size: var(--op-text-display);
    font-weight: var(--op-w-extrabold);
    line-height: var(--op-lh-tight);
    letter-spacing: var(--op-tracking-tighter);
}

.op .eyebrow,
.op .section-title {
    font-size: var(--op-text-sm);
    font-weight: var(--op-w-bold);
    text-transform: uppercase;
    letter-spacing: var(--op-tracking-wider);
    color: var(--op-fg-muted);
}

.op .meta {
    font-size: var(--op-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--op-tracking-wide);
    color: var(--op-fg-muted);
    font-weight: var(--op-w-medium);
}

.op p { margin: 0 0 var(--op-space-4); }

.op .article-body {
    font-size: 1.08rem;
    line-height: var(--op-lh-loose);
    color: var(--op-gray-700);
}

.op .article-category {
    display: inline-block;
    font-size: var(--op-text-xs);
    font-weight: var(--op-w-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--op-accent);
    border-bottom: 2px solid var(--op-accent);
    padding-bottom: var(--op-space-1);
}

.op code, .op kbd, .op samp { font-family: var(--op-font-mono); }