/**
 * OCTOAgro Branding Library
 * Design tokens derived from https://www.eastagro.ro/
 *
 * Single source of truth for colors, typography, and role-based theming.
 * All portal views (login, supplier, client, admin) consume these variables.
 */

/* ==========================================================================
   1. Global Design Tokens
   ========================================================================== */

:root {
    /* ── Brand colors ─────────────────────────────────────────── */
    --oc-gold:            #ffce00;
    --oc-gold-hover:      #e6b900;
    --oc-gold-light:      #fff4bf;
    --oc-gold-subtle:     #fff9e6;

    --oc-charcoal:        #635540;
    --oc-charcoal-hover:  #463c2c;
    --oc-charcoal-light:  #aea08b;
    --oc-charcoal-subtle: #f5f3ef;

    --oc-white:           #ffffff;
    --oc-black:           #000000;

    /* ── Semantic colors ─────────────────────────────────────────── */
    --oc-primary:         var(--oc-charcoal);
    --oc-primary-hover:   var(--oc-charcoal-hover);
    --oc-accent:          var(--oc-gold);
    --oc-accent-hover:    var(--oc-gold-hover);
    --oc-accent-light:    var(--oc-gold-light);
    --oc-accent-subtle:   var(--oc-gold-subtle);

    --oc-bg:              #f5f6fa;
    --oc-bg-card:         var(--oc-white);
    --oc-bg-header:       var(--oc-white);

    --oc-text:            #333333;
    --oc-text-secondary:  #6c757d;
    --oc-text-muted:      #adb5bd;
    --oc-text-on-primary: var(--oc-white);
    --oc-text-on-accent:  var(--oc-charcoal);

    --oc-border:          #e0e0e0;
    --oc-border-light:    #f0f0f0;

    /* ── Functional colors ───────────────────────────────────────── */
    --oc-success:         #28a745;
    --oc-success-light:   #d4edda;
    --oc-warning:         #ffc107;
    --oc-warning-light:   #fff3cd;
    --oc-danger:          #dc3545;
    --oc-danger-light:    #f8d7da;
    --oc-info:            #aea08b;
    --oc-info-light:      #f5f3ef;

    /* ── Typography ───────────────────────────────────────────── */
    --oc-font-primary:    'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --oc-font-heading:    'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --oc-font-mono:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --oc-font-size-base:  100%;  /* 16px root — matches login page */

    /* ── Type scale (8-step enterprise) ─────────────────────────── */
    --oc-text-xs:    0.75rem;     /* 12px — timestamps, badge text, counters */
    --oc-text-sm:    0.8125rem;   /* 13px — secondary labels, hints, footer */
    --oc-text-base:  0.875rem;    /* 14px — body text, table cells, inputs, buttons */
    --oc-text-md:    1rem;        /* 16px — card headers, section titles, nav links */
    --oc-text-lg:    1.125rem;    /* 18px — page sub-headings */
    --oc-text-xl:    1.25rem;     /* 20px — major headings */
    --oc-text-2xl:   1.5rem;      /* 24px — page titles */
    --oc-text-3xl:   1.75rem;     /* 28px — hero headings */

    --oc-font-weight-light:   300;
    --oc-font-weight-normal:  400;
    --oc-font-weight-medium:  500;
    --oc-font-weight-semi:    600;
    --oc-font-weight-bold:    700;

    --oc-line-height:     1.5;
    --oc-letter-spacing:  0.3px;

    /* ── Shadows ─────────────────────────────────────────────────── */
    --oc-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06);
    --oc-shadow:          0 2px 8px rgba(0, 0, 0, 0.08);
    --oc-shadow-lg:       0 6px 20px rgba(0, 0, 0, 0.12);
    --oc-shadow-xl:       0 8px 30px rgba(0, 0, 0, 0.15);

    /* ── Radii ───────────────────────────────────────────────────── */
    --oc-radius-sm:       4px;
    --oc-radius:          8px;
    --oc-radius-lg:       12px;
    --oc-radius-pill:     50px;

    /* ── Navbar ───────────────────────────────────────────────────── */
    --oc-navbar-bg:       var(--oc-white);
    --oc-navbar-bg-end:   var(--oc-charcoal-subtle);
    --oc-navbar-text:     var(--oc-charcoal);
    --oc-navbar-text-active: var(--oc-charcoal-hover);
    --oc-navbar-accent:   var(--oc-charcoal);

    /* ── Focus ring ──────────────────────────────────────────────── */
    --oc-focus-ring:      0 0 0 0.15rem rgba(255, 206, 0, 0.35);

    /* ── Transitions ─────────────────────────────────────────────── */
    --oc-transition:      0.15s ease;
}


/* ==========================================================================
   2. Role-Based Theme Overrides
   Each role gets a distinct accent so users can instantly identify their view.
   ========================================================================== */

/* Supplier (Furnizor) — Gold accent (default brand) */
[data-role="supplier"] {
    --oc-role-accent:       var(--oc-gold);
    --oc-role-accent-hover: var(--oc-gold-hover);
    --oc-role-accent-light: var(--oc-gold-light);
    --oc-role-text-on-accent: var(--oc-charcoal);
    --oc-role-stat-border:  var(--oc-gold);
}

/* Client — Teal accent */
[data-role="client"] {
    --oc-role-accent:       #0d9488;
    --oc-role-accent-hover: #0b7f74;
    --oc-role-accent-light: #ccfbf1;
    --oc-role-text-on-accent: var(--oc-white);
    --oc-role-stat-border:  #0d9488;
}

/* Admin — Deep charcoal with gold highlights */
[data-role="admin"] {
    --oc-role-accent:       var(--oc-gold);
    --oc-role-accent-hover: var(--oc-gold-hover);
    --oc-role-accent-light: var(--oc-gold-light);
    --oc-role-text-on-accent: var(--oc-charcoal);
    --oc-role-stat-border:  var(--oc-charcoal);
}


/* ==========================================================================
   3. Component Tokens (consumed by style.css & portal.css)
   ========================================================================== */

:root {
    /* ── Buttons ──────────────────────────────────────────────────── */
    --oc-btn-primary-bg:      var(--oc-accent);
    --oc-btn-primary-border:  var(--oc-accent);
    --oc-btn-primary-text:    var(--oc-text-on-accent);
    --oc-btn-primary-bg-hover:    var(--oc-accent-hover);
    --oc-btn-primary-border-hover: var(--oc-accent-hover);

    --oc-btn-action-bg:       var(--oc-primary);
    --oc-btn-action-border:   var(--oc-primary);
    --oc-btn-action-text:     var(--oc-text-on-primary);
    --oc-btn-action-bg-hover: var(--oc-primary-hover);
    --oc-btn-action-border-hover: var(--oc-primary-hover);

    /* ── Pagination ───────────────────────────────────────────────── */
    --oc-pagination-active-bg:    var(--oc-primary);
    --oc-pagination-active-border: var(--oc-primary);
    --oc-pagination-link-color:   var(--oc-primary);

    /* ── Tables ────────────────────────────────────────────────────── */
    --oc-table-hover-bg:      rgba(242, 195, 0, 0.04);
    --oc-table-header-bg:     #f8f9fa;

    /* ── Notifications ────────────────────────────────────────────── */
    --oc-notification-unread-bg:    var(--oc-accent-subtle);
    --oc-notification-unread-border: var(--oc-accent);

    /* ── Upload area ──────────────────────────────────────────────── */
    --oc-upload-hover-border: var(--oc-accent);
    --oc-upload-hover-bg:     var(--oc-accent-subtle);

    /* ── Login page ───────────────────────────────────────────── */
    --oc-login-bg:            var(--oc-white);
    --oc-login-accent:        var(--oc-gold);
    --oc-login-btn-bg:        var(--oc-gold);
    --oc-login-btn-text:      var(--oc-charcoal);
    --oc-login-btn-hover:     var(--oc-gold-hover);
}