/* ============================================================
   Unitel 유니텔연수원 — Design Tokens
   Multicolor stripe brand · Pretendard / JetBrains Mono
   Sampled directly from official logo (assets/logo-vertical.png)
   ============================================================ */

/* Fonts */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ===== BRAND PALETTE — six stripes from the logo ===== */
  --brand-blue:        #43608C; /* slate blue   — top-left arm */
  --brand-orange:      #DB651D; /* warm orange  — top-right arm */
  --brand-yellow:      #E7C700; /* anchor yellow — middle band */
  --brand-purple:      #834B7D; /* plum         — lower band */
  --brand-black:       #1E1C1D; /* stripe black — separator/text */
  --brand-green:       #006C5D; /* deep teal    — U base */

  /* Tints (15% on white) for soft fills */
  --brand-blue-soft:   #E1E7F0;
  --brand-orange-soft: #FBE3D2;
  --brand-yellow-soft: #FBF4CC;
  --brand-purple-soft: #EEE4EC;
  --brand-green-soft:  #D9ECE7;

  /* Default action color = yellow (the anchor stripe) */
  --action:            var(--brand-yellow);
  --action-on:         var(--brand-black);
  --action-hover:      #D8B900;

  /* Secondary action = green (used for "이수/완료/전과정") */
  --action-2:          var(--brand-green);
  --action-2-on:       #ffffff;
  --action-2-hover:    #005648;

  /* ===== SEMANTIC ===== */
  --success:           #006C5D;       /* reuse brand-green */
  --success-light:     #D9ECE7;
  --warning:           #DB651D;       /* reuse brand-orange */
  --warning-light:     #FBE3D2;
  --danger:            #B43F1A;       /* deeper than orange — distinct from brand */
  --danger-light:      #F8DDCE;
  --info:              #43608C;       /* reuse brand-blue */
  --info-light:        #E1E7F0;

  /* ===== NEUTRALS — LIGHT (LMS, forms) ===== */
  --bg-primary:        #ffffff;
  --bg-secondary:      #f7f7f5; /* warm off-white */
  --bg-tertiary:       #ececea;
  --text-primary:      #1E1C1D; /* same as brand-black */
  --text-secondary:    #57534e;
  --text-tertiary:     #a8a29e;
  --border:            #e7e5e4;
  --border-strong:     #d6d3d1;

  /* ===== NEUTRALS — DARK (marketing) ===== */
  --dark-bg:           #0E0F12;
  --dark-surface:      #16181C;
  --dark-card:         #1B1E23;
  --dark-border:       rgba(255,255,255,.08);
  --dark-fg:           #ffffff;
  --dark-fg-2:         rgba(255,255,255,.85);
  --dark-fg-3:         rgba(255,255,255,.65);
  --dark-fg-4:         rgba(255,255,255,.45);

  /* ===== STRIPE GRADIENT (the brand signature) ===== */
  --stripes-vertical: linear-gradient(180deg,
    var(--brand-blue)   0%,  var(--brand-blue)   18%,
    var(--brand-orange) 18%, var(--brand-orange) 30%,
    var(--brand-black)  30%, var(--brand-black)  36%,
    var(--brand-yellow) 36%, var(--brand-yellow) 56%,
    var(--brand-purple) 56%, var(--brand-purple) 70%,
    var(--brand-black)  70%, var(--brand-black)  76%,
    var(--brand-orange) 76%, var(--brand-orange) 82%,
    var(--brand-green)  82%, var(--brand-green) 100%);

  --stripes-horizontal: linear-gradient(90deg,
    var(--brand-blue)   0%,  var(--brand-blue)   16.66%,
    var(--brand-orange) 16.66%, var(--brand-orange) 33.33%,
    var(--brand-yellow) 33.33%, var(--brand-yellow) 50%,
    var(--brand-purple) 50%, var(--brand-purple) 66.66%,
    var(--brand-black)  66.66%, var(--brand-black)  83.33%,
    var(--brand-green)  83.33%, var(--brand-green) 100%);

  /* ===== TYPE ===== */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(40px, 5vw, 64px);
  --fs-h1:      clamp(30px, 4vw, 48px);
  --fs-h2:      clamp(24px, 2.6vw, 32px);
  --fs-h3:      22px;
  --fs-h4:      17px;
  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-caption: 12px;
  --fs-micro:   11px;
  --fs-tiny:    10px;

  --tracking-display: -0.02em;
  --tracking-eyebrow:  0.20em;

  /* ===== RADII ===== */
  --r-sm:   6px;  /* CTA squares — official feel */
  --r-md:  10px;  /* inputs / secondary buttons */
  --r-lg:  14px;  /* cards */
  --r-xl:  20px;  /* hero badges / login */
  --r-pill: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --shadow-cta: 0 6px 20px rgba(231,199,0,.45);     /* yellow glow */
  --shadow-cta-2: 0 6px 20px rgba(0,108,93,.30);    /* green glow */

  /* ===== MOTION ===== */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 120ms var(--ease);
  --t-base: 200ms var(--ease);
}

/* ===== TYPE UTILITIES ===== */
.t-display{ font-size: var(--fs-display); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.1; text-wrap: pretty;}
.t-h1{ font-size: var(--fs-h1); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.2; }
.t-h2{ font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.t-h3{ font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; }
.t-h4{ font-size: var(--fs-h4); font-weight: 700; line-height: 1.4; }
.t-body-lg{ font-size: var(--fs-body-lg); font-weight: 400; line-height: 1.85; }
.t-body{ font-size: var(--fs-body); font-weight: 400; line-height: 1.7; }
.t-caption{ font-size: var(--fs-caption); font-weight: 500; }
.t-eyebrow{ font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.t-mono{ font-family: var(--font-mono); }

/* ===== STRIPE ACCENT (signature flourish) ===== */
.stripe-rule{ height: 6px; background: var(--stripes-horizontal); border-radius: var(--r-pill); }
.stripe-rule-top{ height: 4px; background: var(--stripes-horizontal); }